<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/nav-history-apis.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:28 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=browsers.html>← 7 Loading web pages</a> — <a href=index.html>Table of Contents</a> — <a href=document-sequences.html>7.3 Infrastructure for sequences of documents →</a></nav><ol class=toc><li><ol><li><a href=nav-history-apis.html#nav-traversal-apis><span class=secno>7.2</span> APIs related to navigation and
  session history</a><ol><li><a href=nav-history-apis.html#the-window-object><span class=secno>7.2.1</span> The <code>Window</code> object</a><ol><li><a href=nav-history-apis.html#apis-for-creating-and-navigating-browsing-contexts-by-name><span class=secno>7.2.1.1</span> Opening and closing windows</a><li><a href=nav-history-apis.html#accessing-other-browsing-contexts><span class=secno>7.2.1.2</span> Indexed access on the <code>Window</code> object</a><li><a href=nav-history-apis.html#named-access-on-the-window-object><span class=secno>7.2.1.3</span> Named access on the <code>Window</code> object</a><li><a href=nav-history-apis.html#navigating-nested-browsing-contexts-in-the-dom><span class=secno>7.2.1.4</span> Accessing related windows</a><li><a href=nav-history-apis.html#browser-interface-elements><span class=secno>7.2.1.5</span> Historical browser interface element APIs</a></ol><li><a href=nav-history-apis.html#the-windowproxy-exotic-object><span class=secno>7.2.2</span> The <code>WindowProxy</code> exotic object</a><li><a href=nav-history-apis.html#the-location-interface><span class=secno>7.2.3</span> The <code>Location</code> interface</a><li><a href=nav-history-apis.html#the-history-interface><span class=secno>7.2.4</span> The <code>History</code> interface</a><li><a href=nav-history-apis.html#navigation-api><span class=secno>7.2.5</span> The navigation API</a><ol><li><a href=nav-history-apis.html#navigation-api-intro><span class=secno>7.2.5.1</span> Introduction</a><li><a href=nav-history-apis.html#navigation-interface><span class=secno>7.2.5.2</span> The <code>Navigation</code> interface</a><li><a href=nav-history-apis.html#navigation-api-core><span class=secno>7.2.5.3</span> Core infrastructure</a><li><a href=nav-history-apis.html#the-navigationhistoryentry-interface><span class=secno>7.2.5.4</span> The <code>NavigationHistoryEntry</code> interface</a><li><a href=nav-history-apis.html#the-history-entry-list><span class=secno>7.2.5.5</span> The history entry list</a><li><a href=nav-history-apis.html#navigation-api-initiating-navigations><span class=secno>7.2.5.6</span> Initiating navigations</a><li><a href=nav-history-apis.html#ongoing-navigation-tracking><span class=secno>7.2.5.7</span> Ongoing navigation tracking</a><li><a href=nav-history-apis.html#navigation-activation-interface><span class=secno>7.2.5.8</span> The <code>NavigationActivation</code> interface</a><li><a href=nav-history-apis.html#the-navigate-event><span class=secno>7.2.5.9</span> The <code>navigate</code> event</a><ol><li><a href=nav-history-apis.html#the-navigateevent-interface><span class=secno>7.2.5.9.1</span> The <code>NavigateEvent</code> interface</a><li><a href=nav-history-apis.html#the-navigationprecommitcontroller-interface><span class=secno>7.2.5.9.2</span> The <code>NavigationPrecommitController</code> interface</a><li><a href=nav-history-apis.html#the-navigationdestination-interface><span class=secno>7.2.5.9.3</span> The <code>NavigationDestination</code> interface</a></ol></ol><li><a href=nav-history-apis.html#nav-traversal-event-interfaces><span class=secno>7.2.6</span> Event interfaces</a><ol><li><a href=nav-history-apis.html#the-navigationcurrententrychangeevent-interface><span class=secno>7.2.6.1</span> The <code>NavigationCurrentEntryChangeEvent</code> interface</a><li><a href=nav-history-apis.html#the-popstateevent-interface><span class=secno>7.2.6.2</span> The <code>PopStateEvent</code> interface</a><li><a href=nav-history-apis.html#the-hashchangeevent-interface><span class=secno>7.2.6.3</span> The <code>HashChangeEvent</code> interface</a><li><a href=nav-history-apis.html#the-pageswapevent-interface><span class=secno>7.2.6.4</span> The <code>PageSwapEvent</code> interface</a><li><a href=nav-history-apis.html#the-pagerevealevent-interface><span class=secno>7.2.6.5</span> The <code>PageRevealEvent</code> interface</a><li><a href=nav-history-apis.html#the-pagetransitionevent-interface><span class=secno>7.2.6.6</span> The <code>PageTransitionEvent</code> interface</a><li><a href=nav-history-apis.html#the-beforeunloadevent-interface><span class=secno>7.2.6.7</span> The <code>BeforeUnloadEvent</code> interface</a></ol><li><a href=nav-history-apis.html#the-notrestoredreasons-interface><span class=secno>7.2.7</span> The <code>NotRestoredReasons</code> interface</a></ol></ol></ol><h3 id=nav-traversal-apis><span class=secno>7.2</span> APIs related to navigation and
  session history<a href=#nav-traversal-apis class=self-link></a></h3>

  


  <h4 id=the-window-object><span class=secno>7.2.1</span> The <code>Window</code> object<a href=#the-window-object class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window title="The Window interface represents a window containing a DOM document; the document property points to the DOM document loaded in that window.">Window</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  

  <dl class=domintro><dt><code><var>window</var>.<span id=dom-window>window</span></code><dt><code><var>window</var>.<span id=dom-frames>frames</span></code><dt><code><var>window</var>.<span id=dom-self>self</span></code><dd><p>These attributes all return <var>window</var>.<dt><code><var>window</var>.<span id=dom-document-2>document</span></code><dd><p>Returns the <code>Document</code> associated with <var>window</var>.<dt><code><var>document</var>.<span id=dom-document-defaultview>defaultView</span></code><dd><p>Returns the <code>Window</code> associated with <var>document</var>, if there is one, or null otherwise.</dl>

  


  <h5 id=apis-for-creating-and-navigating-browsing-contexts-by-name><span class=secno>7.2.1.1</span> Opening and closing windows<a href=#apis-for-creating-and-navigating-browsing-contexts-by-name class=self-link></a></h5>

  <dl class=domintro><dt><code><var>window</var> = <var>window</var>.<span id=dom-open>open</span>([ <var>url</var> [, <var>target</var> [, <var>features</var> ] ] ])</code><dd>
    <p>Opens a window to show <var>url</var> (defaults to "<code id=apis-for-creating-and-navigating-browsing-contexts-by-name:about:blank><a href=infrastructure.html#about:blank>about:blank</a></code>"), and returns
    it. <var>target</var> (defaults to "<code>_blank</code>") gives the name of the new
    window. If a window already exists with that name, it is reused. The <var>features</var>
    argument can contain a <a id=apis-for-creating-and-navigating-browsing-contexts-by-name:set-of-comma-separated-tokens href=common-microsyntaxes.html#set-of-comma-separated-tokens>set of comma-separated tokens</a>:</p>

    <dl><dt>"<code>noopener</code>"<dt>"<code>noreferrer</code>"<dd><p>These behave equivalently to the <code id=apis-for-creating-and-navigating-browsing-contexts-by-name:link-type-noopener><a href=links.html#link-type-noopener>noopener</a></code> and <code id=apis-for-creating-and-navigating-browsing-contexts-by-name:link-type-noreferrer><a href=links.html#link-type-noreferrer>noreferrer</a></code> link types on <a href=links.html#hyperlink id=apis-for-creating-and-navigating-browsing-contexts-by-name:hyperlink>hyperlinks</a>.<dt>"<code>popup</code>"<dd><p>Encourages user agents to provide a minimal web browser user interface for the new
     window. (Impacts the <code id=apis-for-creating-and-navigating-browsing-contexts-by-name:dom-barprop-visible><a href=#dom-barprop-visible>visible</a></code> getter on all
     <code>BarProp</code> objects as well.)</dl>

    <pre class=example><code class='js'>globalThis<c- p>.</c->open<c- p>(</c-><c- u>&quot;https://email.example/message/CAOOOkFcWW97r8yg=SsWg7GgCmp4suVX9o85y8BvNRqMjuc5PXg&quot;</c-><c- p>,</c-> <c- kc>undefined</c-><c- p>,</c-> <c- u>&quot;noopener,popup&quot;</c-><c- p>);</c-></code></pre>
   <dt><code><var>window</var>.<span id=dom-name>name</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the name of the window.</p>

    <p>Can be set, to change the name.</p>
   <dt><code><var>window</var>.<span id=dom-window-close>close</span>()</code><dd><p>Closes the window.<dt><code><var>window</var>.<span id=dom-window-closed>closed</span></code><dd><p>Returns true if the window has been closed, false otherwise.<dt><code><var>window</var>.<span id=dom-window-stop>stop</span>()</code><dd><p>Cancels the document load.</dl>

  


  <h5 id=accessing-other-browsing-contexts><span class=secno>7.2.1.2</span> Indexed access on the <code>Window</code> object<a href=#accessing-other-browsing-contexts class=self-link></a></h5>

  <dl class=domintro><dt><code><var>window</var>.<span id=dom-length>length</span></code><dd><p>Returns the number of <a id=accessing-other-browsing-contexts:document-tree-child-navigables href=document-sequences.html#document-tree-child-navigables>document-tree child navigables</a>.<dt><code><var>window</var>[<var>index</var>]</code><dd><p>Returns the <code id=accessing-other-browsing-contexts:windowproxy><a href=#windowproxy>WindowProxy</a></code> corresponding to the indicated <a href=document-sequences.html#document-tree-child-navigables id=accessing-other-browsing-contexts:document-tree-child-navigables-2>document-tree child navigables</a>.</dl>

  


  <h5 id=named-access-on-the-window-object><span class=secno>7.2.1.3</span> Named access on the <code>Window</code> object<a href=#named-access-on-the-window-object class=self-link></a></h5>

  <dl class=domintro><dt><code><var>window</var>[<var>name</var>]</code><dd>
    <p>Returns the indicated element or collection of elements.</p>

    <p>As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to
    this API can vary over time, as new features are added to the web platform, for example. Instead
    of this, use <code>document.getElementById()</code> or <code>document.querySelector()</code>.</p>
   </dl>

  


  <h5 id=navigating-nested-browsing-contexts-in-the-dom><span class=secno>7.2.1.4</span> Accessing related windows<a href=#navigating-nested-browsing-contexts-in-the-dom class=self-link></a></h5>

  <dl class=domintro><dt><code><var>window</var>.<span id=dom-top>top</span></code><dd><p>Returns the <code id=navigating-nested-browsing-contexts-in-the-dom:windowproxy><a href=#windowproxy>WindowProxy</a></code> for the <a id=navigating-nested-browsing-contexts-in-the-dom:top-level-traversable href=document-sequences.html#top-level-traversable>top-level traversable</a>.<dt><code><var>window</var>.<span id=dom-opener>opener</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the <code id=navigating-nested-browsing-contexts-in-the-dom:windowproxy-2><a href=#windowproxy>WindowProxy</a></code> for the <a id=navigating-nested-browsing-contexts-in-the-dom:opener-browsing-context href=document-sequences.html#opener-browsing-context>opener browsing context</a>.</p>

    <p>Returns null if there isn't one or if it has been set to null.</p>

    <p>Can be set to null.</p>
   <dt><code><var>window</var>.<span id=dom-parent>parent</span></code><dd><p>Returns the <code id=navigating-nested-browsing-contexts-in-the-dom:windowproxy-3><a href=#windowproxy>WindowProxy</a></code> for the <a href=document-sequences.html#nav-parent id=navigating-nested-browsing-contexts-in-the-dom:nav-parent>parent
   navigable</a>.<dt><code><var>window</var>.<span id=dom-frameelement>frameElement</span></code><dd>
    <p>Returns the <a id=navigating-nested-browsing-contexts-in-the-dom:navigable-container href=document-sequences.html#navigable-container>navigable container</a> element.</p>

    <p>Returns null if there isn't one, and in cross-origin situations.</p>
   </dl>

  


  <h5 id=browser-interface-elements><span class=secno>7.2.1.5</span> Historical browser interface element APIs<a href=#browser-interface-elements class=self-link></a></h5>

  <p>For historical reasons, the <code>Window</code> interface had some properties that represented
  the visibility of certain web browser interface elements.</p>

  

  <p>For privacy and interoperability reasons, those properties now return all return the same value:
  whether or not the window represents a popup window.</p>

  

  

  <dl class=domintro><dt><code><var>window</var>.<span id=dom-window-locationbar>locationbar</span>.<span id=dom-barprop-visible>visible</span></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/BarProp/visible title="The visible read-only property of the BarProp interface returns true if the user interface element it represents is visible.">BarProp/visible</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>window</var>.<span id=dom-window-menubar>menubar</span>.<a href=#dom-barprop-visible id=browser-interface-elements:dom-barprop-visible>visible</a></code><dt><code><var>window</var>.<span id=dom-window-personalbar>personalbar</span>.<a href=#dom-barprop-visible id=browser-interface-elements:dom-barprop-visible-2>visible</a></code><dt><code><var>window</var>.<span id=dom-window-scrollbars>scrollbars</span>.<a href=#dom-barprop-visible id=browser-interface-elements:dom-barprop-visible-3>visible</a></code><dt><code><var>window</var>.<span id=dom-window-statusbar>statusbar</span>.<a href=#dom-barprop-visible id=browser-interface-elements:dom-barprop-visible-4>visible</a></code><dt><code><var>window</var>.<span id=dom-window-toolbar>toolbar</span>.<a href=#dom-barprop-visible id=browser-interface-elements:dom-barprop-visible-5>visible</a></code><dd><p>Returns true if the <code>Window</code> is not a popup; otherwise, returns false.</dl>

  


  <h4 id=the-windowproxy-exotic-object><span class=secno>7.2.2</span> The <code id=the-windowproxy-exotic-object:windowproxy><a href=#windowproxy>WindowProxy</a></code> exotic object<a href=#the-windowproxy-exotic-object class=self-link></a></h4>

  <p>A <dfn id=windowproxy data-dfn-type=interface><code>WindowProxy</code></dfn> is an exotic object that wraps a
  <code>Window</code> ordinary object, indirecting most operations through to the wrapped object.
  Each <a id=the-windowproxy-exotic-object:browsing-context href=document-sequences.html#browsing-context>browsing context</a> has an associated <code id=the-windowproxy-exotic-object:windowproxy-2><a href=#windowproxy>WindowProxy</a></code> object. When the
  <a id=the-windowproxy-exotic-object:browsing-context-2 href=document-sequences.html#browsing-context>browsing context</a> is <a href=browsing-the-web.html#navigate id=the-windowproxy-exotic-object:navigate>navigated</a>, the <code>Window</code>
  object wrapped by the <a id=the-windowproxy-exotic-object:browsing-context-3 href=document-sequences.html#browsing-context>browsing context</a>'s associated <code id=the-windowproxy-exotic-object:windowproxy-3><a href=#windowproxy>WindowProxy</a></code> object
  is changed.</p>

  


  <h4 id=the-location-interface><span class=secno>7.2.3</span> The <code>Location</code> interface<a href=#the-location-interface class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/location title="The Document.location read-only property returns a Location object, which contains information about the URL of the document and provides methods for changing that URL and loading another URL.">Document/location</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Location title="The Location interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the Document and Window interface have such a linked Location, accessible via Document.location and Window.location respectively.">Location</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>3+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/location title="The Window.location read-only property returns a Location object with information about the current location of the document.">Window/location</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  <p>Each <code>Window</code> object is associated with a unique instance of a <code>Location</code>
  object, allocated when the <code>Window</code> object is created.</p>

  

  <dl class=domintro><dt><code><var>document</var>.<span id=dom-document-location>location</span> [ = <var>value</var> ]</code><dt><code><var>window</var>.<span id=dom-location>location</span> [ = <var>value</var> ]</code><dd>
    <p>Returns a <code>Location</code> object with the current page's location.</p>

    <p>Can be set, to navigate to another page.</p>
   </dl>

  

  <p><code>Location</code> objects provide a representation of the <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-location-interface:the-document's-address" data-x-internal="the-document's-address">URL</a> of their associated <code>Document</code>, as well as
  methods for <a href=browsing-the-web.html#navigate id=the-location-interface:navigate>navigating</a> and <a href=browsing-the-web.html#reload id=the-location-interface:reload>reloading</a>
  the associated <a id=the-location-interface:navigable href=document-sequences.html#navigable>navigable</a>.</p>

  

  <dl class=domintro><dt><code><var>location</var>.<span>toString()</span></code><dt><code><var>location</var>.<span id=dom-location-href>href</span></code><dd>
    <p>Returns the <code>Location</code> object's URL.</p>

    <p>Can be set, to navigate to the given URL.</p>
   <dt><code><var>location</var>.<span id=dom-location-origin>origin</span></code><dd><p>Returns the <code>Location</code> object's URL's origin.<dt><code><var>location</var>.<span id=dom-location-protocol>protocol</span></code><dd>
    <p>Returns the <code>Location</code> object's URL's scheme.</p>

    <p>Can be set, to navigate to the same URL with a changed scheme.</p>
   <dt><code><var>location</var>.<span id=dom-location-host>host</span></code><dd>
    <p>Returns the <code>Location</code> object's URL's host and port (if different from the default
    port for the scheme).</p>

    <p>Can be set, to navigate to the same URL with a changed host and port.</p>
   <dt><code><var>location</var>.<span id=dom-location-hostname>hostname</span></code><dd>
    <p>Returns the <code>Location</code> object's URL's host.</p>

    <p>Can be set, to navigate to the same URL with a changed host.</p>
   <dt><code><var>location</var>.<span id=dom-location-port>port</span></code><dd>
    <p>Returns the <code>Location</code> object's URL's port.</p>

    <p>Can be set, to navigate to the same URL with a changed port.</p>
   <dt><code><var>location</var>.<span id=dom-location-pathname>pathname</span></code><dd>
    <p>Returns the <code>Location</code> object's URL's path.</p>

    <p>Can be set, to navigate to the same URL with a changed path.</p>
   <dt><code><var>location</var>.<span id=dom-location-search>search</span></code><dd>
    <p>Returns the <code>Location</code> object's URL's query (includes leading "<code>?</code>" if non-empty).</p>

    <p>Can be set, to navigate to the same URL with a changed query (ignores leading "<code>?</code>").</p>
   <dt><code><var>location</var>.<span id=dom-location-hash>hash</span></code><dd>
    <p>Returns the <code>Location</code> object's URL's fragment (includes leading "<code>#</code>" if non-empty).</p>

    <p>Can be set, to navigate to the same URL with a changed fragment (ignores leading "<code>#</code>").</p>
   <dt><code><var>location</var>.<span id=dom-location-assign>assign</span>(<var>url</var>)</code><dd><p>Navigates to the given URL.<dt><code><var>location</var>.<span id=dom-location-replace>replace</span>(<var>url</var>)</code><dd><p>Removes the current page from the session history and navigates to the given URL.<dt><code><var>location</var>.<span id=dom-location-reload>reload</span>()</code><dd><p>Reloads the current page.<dt><code><var>location</var>.<span id=dom-location-ancestororigins>ancestorOrigins</span></code><dd>
    <p>Returns a <code>DOMStringList</code> object listing the origins of the <a id=the-location-interface:ancestor-navigables href=document-sequences.html#ancestor-navigables>ancestor navigables</a>' <a href=document-sequences.html#nav-document id=the-location-interface:nav-document>active documents</a>.</p>
   </dl>

  


  <h4 id=the-history-interface><span class=secno>7.2.4</span> The <code>History</code> interface<a href=#the-history-interface class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/History title="The History interface allows manipulation of the browser session history, that is the pages visited in the tab or frame that the current page is loaded in.">History</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/history title="The Window.history read-only property returns a reference to the History object, which provides an interface for manipulating the browser session history (pages visited in the tab or frame that the current page is loaded in).">Window/history</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  

  <dl class=domintro><dt><code><span id=dom-history>history</span>.<span id=dom-history-length>length</span></code><dd><p>Returns the number of overall <a href=document-sequences.html#tn-session-history-entries id=the-history-interface:tn-session-history-entries>session history
   entries</a> for the current <a id=the-history-interface:traversable-navigable href=document-sequences.html#traversable-navigable>traversable navigable</a>.<dt><code><a href=#dom-history id=the-history-interface:dom-history>history</a>.<span id=dom-history-scroll-restoration>scrollRestoration</span></code><dd><p>Returns the <a href=browsing-the-web.html#she-scroll-restoration-mode id=the-history-interface:she-scroll-restoration-mode>scroll restoration mode</a> of
   the <a href=document-sequences.html#nav-active-history-entry id=the-history-interface:nav-active-history-entry>active session history entry</a>.<dt><code><a href=#dom-history id=the-history-interface:dom-history-2>history</a>.<a href=#dom-history-scroll-restoration id=the-history-interface:dom-history-scroll-restoration>scrollRestoration</a> = <var>value</var></code><dd><p>Set the <a href=browsing-the-web.html#she-scroll-restoration-mode id=the-history-interface:she-scroll-restoration-mode-2>scroll restoration mode</a> of the
   <a href=document-sequences.html#nav-active-history-entry id=the-history-interface:nav-active-history-entry-2>active session history entry</a> to
   <var>value</var>.<dt><code><a href=#dom-history id=the-history-interface:dom-history-3>history</a>.<span id=dom-history-state>state</span></code><dd><p>Returns the <a href=browsing-the-web.html#she-classic-history-api-state id=the-history-interface:she-classic-history-api-state>classic history API state</a>
   of the <a href=document-sequences.html#nav-active-history-entry id=the-history-interface:nav-active-history-entry-3>active session history entry</a>, deserialized
   into a JavaScript value.<dt><code><a href=#dom-history id=the-history-interface:dom-history-4>history</a>.<a href=#dom-history-go id=the-history-interface:dom-history-go>go</a>()</code><dd><p>Reloads the current page.<dt><code><a href=#dom-history id=the-history-interface:dom-history-5>history</a>.<span id=dom-history-go>go</span>(<var>delta</var>)</code><dd>
    <p>Goes back or forward the specified number of steps in the overall <a href=document-sequences.html#tn-session-history-entries id=the-history-interface:tn-session-history-entries-2>session history entries</a> list for the current
    <a id=the-history-interface:traversable-navigable-2 href=document-sequences.html#traversable-navigable>traversable navigable</a>.</p>

    <p>A zero delta will reload the current page.</p>

    <p>If the delta is out of range, does nothing.</p>
   <dt><code><a href=#dom-history id=the-history-interface:dom-history-6>history</a>.<span id=dom-history-back>back</span>()</code><dd>
    <p>Goes back one step in the overall <a href=document-sequences.html#tn-session-history-entries id=the-history-interface:tn-session-history-entries-3>session history
    entries</a> list for the current <a id=the-history-interface:traversable-navigable-3 href=document-sequences.html#traversable-navigable>traversable navigable</a>.</p>

    <p>If there is no previous page, does nothing.</p>
   <dt><code><a href=#dom-history id=the-history-interface:dom-history-7>history</a>.<span id=dom-history-forward>forward</span>()</code><dd>
    <p>Goes forward one step in the overall <a href=document-sequences.html#tn-session-history-entries id=the-history-interface:tn-session-history-entries-4>session
    history entries</a> list for the current <a id=the-history-interface:traversable-navigable-4 href=document-sequences.html#traversable-navigable>traversable navigable</a>.</p>

    <p>If there is no next page, does nothing.</p>
   <dt><code><a href=#dom-history id=the-history-interface:dom-history-8>history</a>.<span id=dom-history-pushstate>pushState</span>(<var>data</var>, "")</code><dd>
    <p>Adds a new entry into session history with its <a href=browsing-the-web.html#she-classic-history-api-state id=the-history-interface:she-classic-history-api-state-2>classic history API state</a> set to a serialization
    of <var>data</var>. The <a href=document-sequences.html#nav-active-history-entry id=the-history-interface:nav-active-history-entry-4>active history entry</a>'s
    <a href=browsing-the-web.html#she-url id=the-history-interface:she-url>URL</a> will be copied over and used for the new entry's URL.</p>

    <p>(The second parameter exists for historical reasons, and cannot be omitted; passing the
    empty string is traditional.)</p>
   <dt><code><a href=#dom-history id=the-history-interface:dom-history-9>history</a>.<a href=#dom-history-pushstate id=the-history-interface:dom-history-pushstate>pushState</a>(<var>data</var>, "", <var>url</var>)</code><dd>
    <p>Adds a new entry into session history with its <a href=browsing-the-web.html#she-classic-history-api-state id=the-history-interface:she-classic-history-api-state-3>classic history API state</a> set to a serialization
    of <var>data</var>, and with its <a href=browsing-the-web.html#she-url id=the-history-interface:she-url-2>URL</a> set to <var>url</var>.</p>

    <p>If the current <code>Document</code> <a href=#can-have-its-url-rewritten id=the-history-interface:can-have-its-url-rewritten>cannot have
    its URL rewritten</a> to <var>url</var>, a <a id=the-history-interface:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a>
    <code id=the-history-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> will be thrown.</p>

    <p>(The second parameter exists for historical reasons, and cannot be omitted; passing the
    empty string is traditional.)</p>
   <dt><code><a href=#dom-history id=the-history-interface:dom-history-10>history</a>.<span id=dom-history-replacestate>replaceState</span>(<var>data</var>, "")</code><dd>
    <p>Updates the <a href=browsing-the-web.html#she-classic-history-api-state id=the-history-interface:she-classic-history-api-state-4>classic history API state</a> of
    the <a href=document-sequences.html#nav-active-history-entry id=the-history-interface:nav-active-history-entry-5>active session history entry</a> to a structured
    clone of <var>data</var>.</p>

    <p>(The second parameter exists for historical reasons, and cannot be omitted; passing the
    empty string is traditional.)</p>
   <dt><code><a href=#dom-history id=the-history-interface:dom-history-11>history</a>.<a href=#dom-history-replacestate id=the-history-interface:dom-history-replacestate>replaceState</a>(<var>data</var>, "", <var>url</var>)</code><dd>
    <p>Updates the <a href=browsing-the-web.html#she-classic-history-api-state id=the-history-interface:she-classic-history-api-state-5>classic history API state</a> of
    the <a href=document-sequences.html#nav-active-history-entry id=the-history-interface:nav-active-history-entry-6>active session history entry</a> to a structured
    clone of <var>data</var>, and its <a href=browsing-the-web.html#she-url id=the-history-interface:she-url-3>URL</a> to <var>url</var>.</p>

    <p>If the current <code>Document</code> <a href=#can-have-its-url-rewritten id=the-history-interface:can-have-its-url-rewritten-2>cannot have
    its URL rewritten</a> to <var>url</var>, a <a id=the-history-interface:securityerror-2 href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a>
    <code id=the-history-interface:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> will be thrown.</p>

    <p>(The second parameter exists for historical reasons, and cannot be omitted; passing the
    empty string is traditional.)</p>
   </dl>

  

  <div class=example>
   <table><thead><tr><th><var>document</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-history-interface:the-document's-address" data-x-internal="the-document's-address">URL</a>
      <th><var>targetURL</var>
      <th><span id=can-have-its-url-rewritten>can have its URL rewritten</span>
    <tbody><tr><td><code>https://example.com/home</code>
      <td><code>https://example.com/home#about</code>
      <td>✅
     <tr><td><code>https://example.com/home</code>
      <td><code>https://example.com/home?page=shop</code>
      <td>✅
     <tr><td><code>https://example.com/home</code>
      <td><code>https://example.com/shop</code>
      <td>✅
     <tr><td><code>https://example.com/home</code>
      <td><code>https://user:pass@example.com/home</code>
      <td>❌
     <tr><td><code>https://example.com/home</code>
      <td><code>http://example.com/home</code>
      <td>❌
     <tr><td><code>file:///path/to/x</code>
      <td><code>file:///path/to/x#hash</code>
      <td>✅
     <tr><td><code>file:///path/to/x</code>
      <td><code>file:///path/to/x?search</code>
      <td>✅
     <tr><td><code>file:///path/to/x</code>
      <td><code>file:///path/to/y</code>
      <td>❌
     <tr><td><code>about:blank</code>
      <td><code>about:blank#hash</code>
      <td>✅
     <tr><td><code>about:blank</code>
      <td><code>about:blank?search</code>
      <td>❌
     <tr><td><code>about:blank</code>
      <td><code>about:srcdoc</code>
      <td>❌
     <tr><td><code>data:text/html,foo</code>
      <td><code>data:text/html,foo#hash</code>
      <td>✅
     <tr><td><code>data:text/html,foo</code>
      <td><code>data:text/html,foo?search</code>
      <td>❌
     <tr><td><code>data:text/html,foo</code>
      <td><code>data:text/html,bar</code>
      <td>❌
     <tr><td><code>data:text/html,foo</code>
      <td><code>data:bar</code>
      <td>❌
     <tr><td><code>blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43</code>
      <td><code>blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43#hash</code>
      <td>✅
     <tr><td><code>blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43</code>
      <td><code>blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43?search</code>
      <td>❌
     <tr><td><code>blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43</code>
      <td><code>blob:https://example.com/anything</code>
      <td>❌
     <tr><td><code>blob:https://example.com/77becafe-657b-4fdc-8bd3-e83aaa5e8f43</code>
      <td><code>blob:path</code>
      <td>❌
   </table>

   <p>Note how only the <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-history-interface:the-document's-address-2" data-x-internal="the-document's-address">URL</a> of the <code>Document</code>
   matters, and not its <a href=https://dom.spec.whatwg.org/#concept-document-origin id=the-history-interface:concept-document-origin data-x-internal=concept-document-origin>origin</a>. They can mismatch in
   cases like <code id=the-history-interface:about:blank><a href=infrastructure.html#about:blank>about:blank</a></code> <code>Document</code>s with inherited origins, in sandboxed
   <code id=the-history-interface:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>s, or when the <code id=the-history-interface:dom-document-domain><a href=browsers.html#dom-document-domain>document.domain</a></code>
   setter has been used.</p>
  </div>

  <div class=example>

   <p>Consider a game where the user can navigate along a line, such that the user is always at some
   coordinate, and such that the user can bookmark the page corresponding to a particular
   coordinate, to return to it later.</p>

   <p>A static page implementing the x=5 position in such a game could look like the following:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- c>&lt;!-- this is https://example.com/line?x=5 --&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Line Game - 5<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->You are at coordinate 5 on the line.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?x=6&quot;</c-><c- p>&gt;</c->Advance to 6<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> or
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?x=4&quot;</c-><c- p>&gt;</c->retreat to 4<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->?
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>The problem with such a system is that each time the user clicks, the whole page has to be
   reloaded. Here instead is another way of doing it, using script:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- c>&lt;!-- this starts off as https://example.com/line?x=5 --&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Line Game - 5<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->You are at coordinate <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;coord&quot;</c-><c- p>&gt;</c->5<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c-> on the line.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?x=6&quot;</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;go(1); return false;&quot;</c-><c- p>&gt;</c->Advance to 6<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> or
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?x=4&quot;</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;go(-1); return false;&quot;</c-><c- p>&gt;</c->retreat to 4<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->?
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> currentPage <c- o>=</c-> <c- mf>5</c-><c- p>;</c-> <c- c1>// prefilled by server</c->
 <c- a>function</c-> go<c- p>(</c->d<c- p>)</c-> <c- p>{</c->
   setupPage<c- p>(</c->currentPage <c- o>+</c-> d<c- p>);</c->
   history<c- p>.</c->pushState<c- p>(</c->currentPage<c- p>,</c-> <c- u>&quot;&quot;</c-><c- p>,</c-> <c- t>&apos;?x=&apos;</c-> <c- o>+</c-> currentPage<c- p>);</c->
 <c- p>}</c->
 onpopstate <c- o>=</c-> <c- a>function</c-><c- p>(</c->event<c- p>)</c-> <c- p>{</c->
   setupPage<c- p>(</c->event<c- p>.</c->state<c- p>);</c->
 <c- p>}</c->
 <c- a>function</c-> setupPage<c- p>(</c->page<c- p>)</c-> <c- p>{</c->
   currentPage <c- o>=</c-> page<c- p>;</c->
   document<c- p>.</c->title <c- o>=</c-> <c- t>&apos;Line Game - &apos;</c-> <c- o>+</c-> currentPage<c- p>;</c->
   document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;coord&apos;</c-><c- p>).</c->textContent <c- o>=</c-> currentPage<c- p>;</c->
   document<c- p>.</c->links<c- p>[</c-><c- mf>0</c-><c- p>].</c->href <c- o>=</c-> <c- t>&apos;?x=&apos;</c-> <c- o>+</c-> <c- p>(</c->currentPage<c- o>+</c-><c- mf>1</c-><c- p>);</c->
   document<c- p>.</c->links<c- p>[</c-><c- mf>0</c-><c- p>].</c->textContent <c- o>=</c-> <c- t>&apos;Advance to &apos;</c-> <c- o>+</c-> <c- p>(</c->currentPage<c- o>+</c-><c- mf>1</c-><c- p>);</c->
   document<c- p>.</c->links<c- p>[</c-><c- mf>1</c-><c- p>].</c->href <c- o>=</c-> <c- t>&apos;?x=&apos;</c-> <c- o>+</c-> <c- p>(</c->currentPage<c- o>-</c-><c- mf>1</c-><c- p>);</c->
   document<c- p>.</c->links<c- p>[</c-><c- mf>1</c-><c- p>].</c->textContent <c- o>=</c-> <c- t>&apos;retreat to &apos;</c-> <c- o>+</c-> <c- p>(</c->currentPage<c- o>-</c-><c- mf>1</c-><c- p>);</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>In systems without script, this still works like the previous example. However, users that
   <em>do</em> have script support can now navigate much faster, since there is no network access
   for the same experience. Furthermore, contrary to the experience the user would have with just a
   naïve script-based approach, bookmarking and navigating the session history still work.</p>

   <p>In the example above, the <var>data</var> argument to the <code id=the-history-interface:dom-history-pushstate-2><a href=#dom-history-pushstate>pushState()</a></code> method is the same information as would be sent
   to the server, but in a more convenient form, so that the script doesn't have to parse the URL
   each time the user navigates.</p>

  </div>

  <div class=example>
   <p>Most applications want to use the same <a id=the-history-interface:scroll-restoration-mode href=browsing-the-web.html#scroll-restoration-mode>scroll restoration mode</a> value for all of
   their history entries. To achieve this they can set the <code id=the-history-interface:dom-history-scroll-restoration-2><a href=#dom-history-scroll-restoration>scrollRestoration</a></code> attribute as soon as possible
   (e.g., in the first <code id=the-history-interface:the-script-element><a href=scripting.html#the-script-element>script</a></code> element in the document's <code id=the-history-interface:the-head-element><a href=semantics.html#the-head-element>head</a></code> element) to
   ensure that any entry added to the history session gets the desired scroll restoration mode.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
       <c- k>if</c-> <c- p>(</c-><c- t>&apos;scrollRestoration&apos;</c-> <c- k>in</c-> history<c- p>)</c->
            history<c- p>.</c->scrollRestoration <c- o>=</c-> <c- t>&apos;manual&apos;</c-><c- p>;</c->
  <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
   </code></pre>
  </div>


  <h4 id=navigation-api><span class=secno>7.2.5</span> The navigation API<a href=#navigation-api class=self-link></a></h4>

  <h5 id=navigation-api-intro><span class=secno>7.2.5.1</span> Introduction<a href=#navigation-api-intro class=self-link></a></h5>

  

  <p>The navigation API, provided by the global <code>navigation</code>
  property, provides a modern and web application-focused way of managing navigations and history entries. It is a successor to the classic <code id=navigation-api-intro:dom-location><a href=#dom-location>location</a></code> and <code id=navigation-api-intro:dom-history><a href=#dom-history>history</a></code> APIs.</p>

  <p>One ability the API provides is inspecting <a href=browsing-the-web.html#session-history-entry id=navigation-api-intro:session-history-entry>session history entries</a>. For example, the following will display the entries' URLs in an ordered list:</p>

  <pre><code class='js'><c- a>const</c-> ol <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>&quot;ol&quot;</c-><c- p>);</c->
ol<c- p>.</c->start <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> <c- c1>// so that the list items&apos; ordinal values match up with the entry indices</c->

<c- k>for</c-> <c- p>(</c-><c- a>const</c-> entry <c- k>of</c-> navigation<c- p>.</c->entries<c- p>())</c-> <c- p>{</c->
  <c- a>const</c-> li <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>&quot;li&quot;</c-><c- p>);</c->

  <c- k>if</c-> <c- p>(</c->entry<c- p>.</c->index <c- o>&lt;</c-> navigation<c- p>.</c->currentEntry<c- p>.</c->index<c- p>)</c-> <c- p>{</c->
    li<c- p>.</c->className <c- o>=</c-> <c- u>&quot;backward&quot;</c-><c- p>;</c->
  <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c->entry<c- p>.</c->index <c- o>&gt;</c-> navigation<c- p>.</c->currentEntry<c- p>.</c->index<c- p>)</c-> <c- p>{</c->
    li<c- p>.</c->className <c- o>=</c-> <c- u>&quot;forward&quot;</c-><c- p>;</c->
  <c- p>}</c-> <c- k>else</c-> <c- p>{</c->
    li<c- p>.</c->className <c- o>=</c-> <c- u>&quot;current&quot;</c-><c- p>;</c->
  <c- p>}</c->

  li<c- p>.</c->textContent <c- o>=</c-> entry<c- p>.</c->url<c- p>;</c->
  ol<c- p>.</c->append<c- p>(</c->li<c- p>);</c->
<c- p>}</c-></code></pre>

  <p>The <code id=navigation-api-intro:dom-navigation-entries><a href=#dom-navigation-entries>navigation.entries()</a></code> array contains <code>NavigationHistoryEntry</code> instances, which have other useful properties in addition to the <code id=navigation-api-intro:dom-navigationhistoryentry-url><a href=#dom-navigationhistoryentry-url>url</a></code> and <code id=navigation-api-intro:dom-navigationhistoryentry-index><a href=#dom-navigationhistoryentry-index>index</a></code> properties shown here. Note that the array only contains <code>NavigationHistoryEntry</code> objects that represent the current <a id=navigation-api-intro:navigable href=document-sequences.html#navigable>navigable</a>, and thus its contents are not impacted by navigations inside <a href=document-sequences.html#navigable-container id=navigation-api-intro:navigable-container>navigable containers</a> such as <code id=navigation-api-intro:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>s, or by navigations of the <a href=document-sequences.html#nav-parent id=navigation-api-intro:nav-parent>parent navigable</a> in cases where the navigation API is itself being used inside an <code id=navigation-api-intro:the-iframe-element-2><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>. Additionally, it only contains <code>NavigationHistoryEntry</code> objects representing same-<a id=navigation-api-intro:concept-origin href=browsers.html#concept-origin>origin</a> <a href=browsing-the-web.html#session-history-entry id=navigation-api-intro:session-history-entry-2>session history entries</a>, meaning that if the user has visited other origins before or after the current one, there will not be corresponding <code>NavigationHistoryEntry</code>s.</p>

  <hr>

  <p>The navigation API can also be used to navigate, reload, or traverse through the history:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;navigation.reload()&quot;</c-><c- p>&gt;</c->Reload<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;url&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;navigationURL&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;navigation.navigate(navigationURL.value)&quot;</c-><c- p>&gt;</c->Navigate<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>button</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;backButton&quot;</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;navigation.back()&quot;</c-><c- p>&gt;</c->Back<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>button</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;forwardButton&quot;</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;navigation.forward()&quot;</c-><c- p>&gt;</c->Forward<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>select</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;traversalDestinations&quot;</c-><c- p>&gt;&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>button</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;goButton&quot;</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;navigation.traverseTo(traversalDestinations.value)&quot;</c-><c- p>&gt;</c->Traverse To<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
backButton<c- p>.</c->disabled <c- o>=</c-> <c- o>!</c->navigation<c- p>.</c->canGoBack<c- p>;</c->
forwardButton<c- p>.</c->disabled <c- o>=</c-> <c- o>!</c->navigation<c- p>.</c->canGoForward<c- p>;</c->

<c- k>for</c-> <c- p>(</c-><c- a>const</c-> entry <c- k>of</c-> navigation<c- p>.</c->entries<c- p>())</c-> <c- p>{</c->
  traversalDestinations<c- p>.</c->append<c- p>(</c-><c- k>new</c-> Option<c- p>(</c->entry<c- p>.</c->url<c- p>,</c-> entry<c- p>.</c->key<c- p>));</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  <p>Note that traversals are again limited to same-<a id=navigation-api-intro:concept-origin-2 href=browsers.html#concept-origin>origin</a> destinations, meaning that, for example, <code id=navigation-api-intro:dom-navigation-cangoback><a href=#dom-navigation-cangoback>navigation.canGoBack</a></code> will be false if the previous <a id=navigation-api-intro:session-history-entry-3 href=browsing-the-web.html#session-history-entry>session history entry</a> is for a page from another origin.</p>

  <hr>

  <p>The most powerful part of the navigation API is the <code id=navigation-api-intro:event-navigate><a href=indices.html#event-navigate>navigate</a></code> event, which fires whenever almost any navigation or traversal occurs in the current <a id=navigation-api-intro:navigable-2 href=document-sequences.html#navigable>navigable</a>:</p>

  <pre><code class='js'>navigation<c- p>.</c->onnavigate <c- o>=</c-> event <c- p>=&gt;</c-> <c- p>{</c->
  console<c- p>.</c->log<c- p>(</c->event<c- p>.</c->navigationType<c- p>);</c-> <c- c1>// &quot;push&quot;, &quot;replace&quot;, &quot;reload&quot;, or &quot;traverse&quot;</c->
  console<c- p>.</c->log<c- p>(</c->event<c- p>.</c->destination<c- p>.</c->url<c- p>);</c->
  console<c- p>.</c->log<c- p>(</c->event<c- p>.</c->userInitiated<c- p>);</c->
  <c- c1>// ... and </c-><a href='#the-navigateevent-interface'><c- c1>other useful properties</c-></a>
<c- p>};</c-></code></pre>

  <p>(The event will not fire for <a href=speculative-loading.html#nav-traversal-ui>location bar-initiated navigations</a>, or navigations initiated from other windows, when the destination of the navigation is a new document.)</p>

  <p>Much of the time, the event's <code id=navigation-api-intro:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> property will be true, meaning this event can be canceled using <code id=navigation-api-intro:dom-event-preventdefault><a data-x-internal=dom-event-preventdefault href=https://dom.spec.whatwg.org/#dom-event-preventdefault>preventDefault()</a></code>:</p>

  <pre><code class='js'>navigation<c- p>.</c->onnavigate <c- o>=</c-> event <c- p>=&gt;</c-> <c- p>{</c->
  <c- k>if</c-> <c- p>(</c->event<c- p>.</c->cancelable <c- o>&amp;&amp;</c-> isDisallowedURL<c- p>(</c->event<c- p>.</c->destination<c- p>.</c->url<c- p>))</c-> <c- p>{</c->
    alert<c- p>(</c-><c- sb>`Please don&apos;t go to </c-><c- si>${</c->event<c- p>.</c->destination<c- p>.</c->url<c- si>}</c-><c- sb>!`</c-><c- p>);</c->
    event<c- p>.</c->preventDefault<c- p>();</c->
  <c- p>}</c->
<c- p>};</c->
</code></pre>

  <p>The <code id=navigation-api-intro:dom-event-cancelable-2><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> property will be false for some "<code id=navigation-api-intro:dom-navigationtype-traverse><a href=#dom-navigationtype-traverse>traverse</a></code>" navigations, such as those taking place inside <a href=document-sequences.html#child-navigable id=navigation-api-intro:child-navigable>child navigables</a>, those crossing to new origins, or when the user attempts to traverse again shortly after a previous call to <code id=navigation-api-intro:dom-event-preventdefault-2><a data-x-internal=dom-event-preventdefault href=https://dom.spec.whatwg.org/#dom-event-preventdefault>preventDefault()</a></code> prevented them from doing so.</p>

  <p>The <code>NavigateEvent</code>'s <code id=navigation-api-intro:dom-navigateevent-intercept><a href=#dom-navigateevent-intercept>intercept()</a></code> method allows intercepting a navigation and converting it into a same-document navigation:</p>

  <pre><code class='js'>navigation<c- p>.</c->addEventListener<c- p>(</c-><c- u>&quot;navigate&quot;</c-><c- p>,</c-> e <c- p>=&gt;</c-> <c- p>{</c->
  <c- c1>// Some navigations, e.g. cross-origin navigations, we cannot intercept.</c->
  <c- c1>// Let the browser handle those normally.</c->
  <c- k>if</c-> <c- p>(</c-><c- o>!</c->e<c- p>.</c->canIntercept<c- p>)</c-> <c- p>{</c->
    <c- k>return</c-><c- p>;</c->
  <c- p>}</c->

  <c- c1>// Similarly, don&apos;t intercept fragment navigations or downloads.</c->
  <c- k>if</c-> <c- p>(</c->e<c- p>.</c->hashChange <c- o>||</c-> e<c- p>.</c->downloadRequest <c- o>!==</c-> <c- kc>null</c-><c- p>)</c-> <c- p>{</c->
    <c- k>return</c-><c- p>;</c->
  <c- p>}</c->

  <c- a>const</c-> url <c- o>=</c-> <c- k>new</c-> URL<c- p>(</c->event<c- p>.</c->destination<c- p>.</c->url<c- p>);</c->

  <c- k>if</c-> <c- p>(</c->url<c- p>.</c->pathname<c- p>.</c->startsWith<c- p>(</c-><c- u>&quot;/articles/&quot;</c-><c- p>))</c-> <c- p>{</c->
    e<c- p>.</c->intercept<c- p>({</c->
      <c- k>async</c-> handler<c- p>()</c-> <c- p>{</c->
        <c- c1>// The URL has already changed, so show a placeholder while</c->
        <c- c1>// fetching the new content, such as a spinner or loading page.</c->
        renderArticlePagePlaceholder<c- p>();</c->

        <c- c1>// Fetch the new content and display when ready.</c->
        <c- a>const</c-> articleContent <c- o>=</c-> <c- k>await</c-> getArticleContent<c- p>(</c->url<c- p>.</c->pathname<c- p>,</c-> <c- p>{</c-> signal<c- o>:</c-> e<c- p>.</c->signal <c- p>});</c->
        renderArticlePage<c- p>(</c->articleContent<c- p>);</c->
      <c- p>}</c->
    <c- p>});</c->
  <c- p>}</c->
<c- p>});</c-></code></pre>

  <p>Note that the <code id=navigation-api-intro:dom-navigationinterceptoptions-handler><a href=#dom-navigationinterceptoptions-handler>handler</a></code> function can return a promise to represent the asynchronous progress, and success or failure, of the navigation. While the promise is still pending, browser UI can treat the navigation as ongoing (e.g., by presenting a loading spinner). Other parts of the navigation API are also sensitive to these promises, such as the return value of <code id=navigation-api-intro:dom-navigation-navigate><a href=#dom-navigation-navigate>navigation.navigate()</a></code>:

  <pre><code class='js'><c- a>const</c-> <c- p>{</c-> committed<c- p>,</c-> finished <c- p>}</c-> <c- o>=</c-> <c- k>await</c-> navigation<c- p>.</c->navigate<c- p>(</c-><c- u>&quot;/articles/the-navigation-api-is-cool&quot;</c-><c- p>);</c->

<c- c1>// The committed promise will fulfill once the URL has changed, which happens</c->
<c- c1>// immediately (as long as the NavigateEvent wasn&apos;t canceled).</c->
<c- k>await</c-> committed<c- p>;</c->

<c- c1>// The finished promise will fulfill once the Promise returned by handler() has</c->
<c- c1>// fulfilled, which happens once the article is downloaded and rendered. (Or,</c->
<c- c1>// it will reject, if handler() fails along the way).</c->
<c- k>await</c-> finished<c- p>;</c-></code></pre>

  <h5 id=navigation-interface><span class=secno>7.2.5.2</span> The <code>Navigation</code> interface<a href=#navigation-interface class=self-link></a></h5>

  

  <p>The following are the <a id=navigation-interface:event-handlers href=webappapis.html#event-handlers>event handlers</a> (and their corresponding <span>event handler event types</span>)  supported,
  as <a id=navigation-interface:event-handler-idl-attributes href=webappapis.html#event-handler-idl-attributes>event handler IDL attributes</a>, by all objects implementing the
  <code>Navigation</code> interface:</p>

  <table><thead><tr><th><a href=webappapis.html#event-handlers id=navigation-interface:event-handlers-2>Event handler</a>
     <th><span>Event handler event type</span>
   <tbody><tr><td><dfn data-dfn-for=Navigation id=handler-navigation-onnavigate data-dfn-type=attribute><code>onnavigate</code></dfn>
     <td><code id=navigation-interface:event-navigate><a href=indices.html#event-navigate>navigate</a></code>
    <tr><td><dfn data-dfn-for=Navigation id=handler-navigation-onnavigatesuccess data-dfn-type=attribute><code>onnavigatesuccess</code></dfn>
     <td><code id=navigation-interface:event-navigatesuccess><a href=indices.html#event-navigatesuccess>navigatesuccess</a></code>
    <tr><td><dfn data-dfn-for=Navigation id=handler-navigation-onnavigateerror data-dfn-type=attribute><code>onnavigateerror</code></dfn>
     <td><code id=navigation-interface:event-navigateerror><a href=indices.html#event-navigateerror>navigateerror</a></code>
    <tr><td><dfn data-dfn-for=Navigation id=handler-navigation-oncurrententrychange data-dfn-type=attribute><code>oncurrententrychange</code></dfn>
     <td><code id=navigation-interface:event-currententrychange><a href=indices.html#event-currententrychange>currententrychange</a></code>
  </table>

  <h5 id=navigation-api-core><span class=secno>7.2.5.3</span> Core infrastructure<a href=#navigation-api-core class=self-link></a></h5>

  

  <p>A key type used throughout the navigation API is the <code>NavigationType</code>
  enumeration:</p>

  

  <p>This captures the main web developer-visible types of "navigations", which (as <a href=browsing-the-web.html#note-meaning-of-navigate>noted elsewhere</a>) do not exactly correspond to this standard's
  singular <a id=navigation-api-core:navigate href=browsing-the-web.html#navigate>navigate</a> algorithm. The meaning of each value is the following:</p>

  <dl><dt>"<dfn data-dfn-for=NavigationType id=dom-navigationtype-push data-dfn-type=enum-value><code>push</code></dfn>"<dd>Corresponds to calls to <a id=navigation-api-core:navigate-2 href=browsing-the-web.html#navigate>navigate</a> where the <a id=navigation-api-core:history-handling-behavior href=browsing-the-web.html#history-handling-behavior>history handling
   behavior</a> ends up as "<code id=navigation-api-core:navigationhistorybehavior-push><a href=browsing-the-web.html#navigationhistorybehavior-push>push</a></code>", or to
   <code id=navigation-api-core:dom-history-pushstate><a href=#dom-history-pushstate>history.pushState()</a></code>.<dt>"<dfn data-dfn-for=NavigationType id=dom-navigationtype-replace data-dfn-type=enum-value><code>replace</code></dfn>"<dd>Corresponds to calls to <a id=navigation-api-core:navigate-3 href=browsing-the-web.html#navigate>navigate</a> where the <a id=navigation-api-core:history-handling-behavior-2 href=browsing-the-web.html#history-handling-behavior>history handling
   behavior</a> ends up as "<code id=navigation-api-core:navigationhistorybehavior-replace-2><a href=browsing-the-web.html#navigationhistorybehavior-replace-2>replace</a></code>", or
   to <code id=navigation-api-core:dom-history-pushstate-2><a href=#dom-history-pushstate>history.replaceState()</a></code>.<dt>"<dfn data-dfn-for=NavigationType id=dom-navigationtype-reload data-dfn-type=enum-value><code>reload</code></dfn>"<dd>Corresponds to calls to <a id=navigation-api-core:reload href=browsing-the-web.html#reload>reload</a>.<dt>"<dfn data-dfn-for=NavigationType id=dom-navigationtype-traverse data-dfn-type=enum-value><code>traverse</code></dfn>"<dd>Corresponds to calls to <a id=navigation-api-core:traverse-the-history-by-a-delta href=browsing-the-web.html#traverse-the-history-by-a-delta>traverse the history by a delta</a>.</dl>

  


  <h5 id=the-navigationhistoryentry-interface><span class=secno>7.2.5.4</span> The <code>NavigationHistoryEntry</code> interface<a href=#the-navigationhistoryentry-interface class=self-link></a></h5>

  

  <dl class=domintro><dt><code><var>entry</var>.<span id=dom-navigationhistoryentry-url>url</span></code><dd>
    <p>The URL of this navigation history entry.</p>

    <p>This can return null if the entry corresponds to a different <code>Document</code> than the
    current one (i.e., if <code id=the-navigationhistoryentry-interface:dom-navigationhistoryentry-samedocument><a href=#dom-navigationhistoryentry-samedocument>sameDocument</a></code>
    is false), and that <code>Document</code> was fetched with a <a id=the-navigationhistoryentry-interface:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a> of
    "<code>no-referrer</code>" or "<code>origin</code>", since that indicates
    the <code>Document</code> in question is hiding its URL even from other same-origin pages.</p>
   <dt><code><var>entry</var>.<span id=dom-navigationhistoryentry-key>key</span></code><dd>
    <p>A user agent-generated random UUID string representing this navigation history entry's place
    in the navigation history list. This value will be reused by other
    <code>NavigationHistoryEntry</code> instances that replace this one due to "<code id=the-navigationhistoryentry-interface:dom-navigationtype-replace><a href=#dom-navigationtype-replace>replace</a></code>" navigations, and will survive reloads and
    session restores.</p>

    <p>This is useful for navigating back to this entry in the navigation history list, using <code id=the-navigationhistoryentry-interface:dom-navigation-traverseto><a href=#dom-navigation-traverseto>navigation.traverseTo(key)</a></code>.</p>
   <dt><code><var>entry</var>.<span id=dom-navigationhistoryentry-id>id</span></code><dd>
    <p>A user agent-generated random UUID string representing this specific navigation history
    entry. This value will <em>not</em> be reused by other <code>NavigationHistoryEntry</code>
    instances. This value will survive reloads and session restores.</p>

    <p>This is useful for associating data with this navigation history entry using other storage
    APIs.</p>
   <dt><code><var>entry</var>.<span id=dom-navigationhistoryentry-index>index</span></code><dd><p>The index of this <code>NavigationHistoryEntry</code> within <code id=the-navigationhistoryentry-interface:dom-navigation-entries><a href=#dom-navigation-entries>navigation.entries()</a></code>, or −1 if the entry is not in
   the navigation history entry list.<dt><code><var>entry</var>.<span id=dom-navigationhistoryentry-samedocument>sameDocument</span></code><dd><p>Indicates whether or not this navigation history entry is for the same
   <code>Document</code> as the current one, or not. This will be true, for example, when the entry
   represents a fragment navigation or single-page app navigation.<dt><code><var>entry</var>.<span id=dom-navigationhistoryentry-getstate>getState</span>()</code><dd>
    <p>Returns the <span>deserialization</span> of the state stored
    in this entry, which was added to the entry using <code id=the-navigationhistoryentry-interface:dom-navigation-navigate><a href=#dom-navigation-navigate>navigation.navigate()</a></code> or <code id=the-navigationhistoryentry-interface:dom-navigation-updatecurrententry><a href=#dom-navigation-updatecurrententry>navigation.updateCurrentEntry()</a></code>. This state
    survives reloads and session restores.</p>

    <p>Note that in general, unless the state value is a primitive, <code class=js>entry.getState() !== entry.getState()</code>, since a fresh deserialization is
    returned each time.</p>

    <p>This state is unrelated to the classic history API's <code id=the-navigationhistoryentry-interface:dom-history-state><a href=#dom-history-state>history.state</a></code>.</p>
   </dl>

  

  <p>The following are the <a id=the-navigationhistoryentry-interface:event-handlers href=webappapis.html#event-handlers>event handlers</a> (and their corresponding <span>event handler event types</span>)  supported,
  as <a id=the-navigationhistoryentry-interface:event-handler-idl-attributes href=webappapis.html#event-handler-idl-attributes>event handler IDL attributes</a>, by all objects implementing the
  <code>NavigationHistoryEntry</code> interface:</p>

  <table><thead><tr><th><a href=webappapis.html#event-handlers id=the-navigationhistoryentry-interface:event-handlers-2>Event handler</a>
     <th><span>Event handler event type</span>
   <tbody><tr><td><dfn data-dfn-for=NavigationHistoryEntry id=handler-navigationhistoryentry-ondispose data-dfn-type=attribute><code>ondispose</code></dfn>
     <td><code id=the-navigationhistoryentry-interface:event-dispose><a href=indices.html#event-dispose>dispose</a></code>
  </table>


  <h5 id=the-history-entry-list><span class=secno>7.2.5.5</span> The history entry list<a href=#the-history-entry-list class=self-link></a></h5>

  <dl class=domintro><dt><code><var>entries</var> = <span>navigation</span>.<span id=dom-navigation-entries>entries()</span></code><dd><p>Returns an array of <code>NavigationHistoryEntry</code> instances represent the current
   navigation history entry list, i.e., all <a href=browsing-the-web.html#session-history-entry id=the-history-entry-list:session-history-entry>session history
   entries</a> for this <a id=the-history-entry-list:navigable href=document-sequences.html#navigable>navigable</a> that are <a id=the-history-entry-list:same-origin href=browsers.html#same-origin>same origin</a> and contiguous
   to the <a href=document-sequences.html#nav-current-history-entry id=the-history-entry-list:nav-current-history-entry>current session history entry</a>.</p>

   <dt><code><span>navigation</span>.<span id=dom-navigation-currententry>currentEntry</span></code><dd><p>Returns the <code>NavigationHistoryEntry</code> corresponding to the <a href=document-sequences.html#nav-current-history-entry id=the-history-entry-list:nav-current-history-entry-2>current session history entry</a>.</p>

   <dt><code><span>navigation</span>.<span id=dom-navigation-updatecurrententry>updateCurrentEntry</span>({ <span>state</span> })</code><dd>
    <p>Updates the <a href=browsing-the-web.html#she-navigation-api-state id=the-history-entry-list:she-navigation-api-state>navigation API state</a> of the <a href=document-sequences.html#nav-current-history-entry id=the-history-entry-list:nav-current-history-entry-3>current session history entry</a>, without performing a
    navigation like <code id=the-history-entry-list:dom-navigation-reload><a href=#dom-navigation-reload>navigation.reload()</a></code> would do.</p>

    <p>This method is best used to capture updates to the page that have already happened, and need
    to be reflected into the navigation API state. For cases where the state update is meant to
    drive a page update, instead use <code id=the-history-entry-list:dom-navigation-navigate><a href=#dom-navigation-navigate>navigation.navigate()</a></code> or <code id=the-history-entry-list:dom-navigation-reload-2><a href=#dom-navigation-reload>navigation.reload()</a></code>, which will trigger a <code id=the-history-entry-list:event-navigate><a href=indices.html#event-navigate>navigate</a></code> event.</p>
   <dt><code><span>navigation</span>.<span id=dom-navigation-cangoback>canGoBack</span></code><dd><p>Returns true if the current <a href=document-sequences.html#nav-current-history-entry id=the-history-entry-list:nav-current-history-entry-4>current session
   history entry</a> (i.e., <code id=the-history-entry-list:dom-navigation-currententry><a href=#dom-navigation-currententry>currentEntry</a></code>) is
   not the first one in the navigation history entry list (i.e., in <code id=the-history-entry-list:dom-navigation-entries><a href=#dom-navigation-entries>entries()</a></code>). This means that there is a previous
   <a id=the-history-entry-list:session-history-entry-2 href=browsing-the-web.html#session-history-entry>session history entry</a> for this <a id=the-history-entry-list:navigable-2 href=document-sequences.html#navigable>navigable</a>, and its <a href=browsing-the-web.html#she-document-state id=the-history-entry-list:she-document-state>document state</a>'s <a href=browsing-the-web.html#document-state-origin id=the-history-entry-list:document-state-origin>origin</a> is <a id=the-history-entry-list:same-origin-2 href=browsers.html#same-origin>same origin</a> with the current
   <code>Document</code>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=the-history-entry-list:concept-document-origin data-x-internal=concept-document-origin>origin</a>.</p>

   <dt><code><span>navigation</span>.<span id=dom-navigation-cangoforward>canGoForward</span></code><dd><p>Returns true if the current <a href=document-sequences.html#nav-current-history-entry id=the-history-entry-list:nav-current-history-entry-5>current session
   history entry</a> (i.e., <code id=the-history-entry-list:dom-navigation-currententry-2><a href=#dom-navigation-currententry>currentEntry</a></code>) is
   not the last one in the navigation history entry list (i.e., in <code id=the-history-entry-list:dom-navigation-entries-2><a href=#dom-navigation-entries>entries()</a></code>). This means that there is a next <a id=the-history-entry-list:session-history-entry-3 href=browsing-the-web.html#session-history-entry>session
   history entry</a> for this <a id=the-history-entry-list:navigable-3 href=document-sequences.html#navigable>navigable</a>, and its <a href=browsing-the-web.html#she-document-state id=the-history-entry-list:she-document-state-2>document state</a>'s <a href=browsing-the-web.html#document-state-origin id=the-history-entry-list:document-state-origin-2>origin</a> is <a id=the-history-entry-list:same-origin-3 href=browsers.html#same-origin>same origin</a> with the current
   <code>Document</code>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=the-history-entry-list:concept-document-origin-2 data-x-internal=concept-document-origin>origin</a>.</p>
  </dl>

  


  <h5 id=navigation-api-initiating-navigations><span class=secno>7.2.5.6</span> Initiating navigations<a href=#navigation-api-initiating-navigations class=self-link></a></h5>

  <dl class=domintro><dt><code>{ <span>committed</span>, <span>finished</span> } = <span>navigation</span>.<span id=dom-navigation-navigate>navigate</span>(<var>url</var>)</code><dt><code>{ <span>committed</span>, <span>finished</span> } = <span>navigation</span>.<a href=#dom-navigation-navigate id=navigation-api-initiating-navigations:dom-navigation-navigate>navigate</a>(<var>url</var>, <var>options</var>)</code><dd>
    <p><a href=browsing-the-web.html#navigate id=navigation-api-initiating-navigations:navigate>Navigates</a> the current page to the given <var>url</var>.
    <var>options</var> can contain the following values:</p>

    <ul><li><p><code id=dom-navigationnavigateoptions-history>history</code> can be set to
     "<code id=navigationhistorybehavior-replace><a href=browsing-the-web.html#navigationhistorybehavior-replace-2>replace</a></code>" to replace the current
     session history entry, instead of pushing a new one.<li><p><code id=dom-navigationoptions-info>info</code> can be set to any value; it
     will populate the <code id=navigation-api-initiating-navigations:dom-navigateevent-info><a href=#dom-navigateevent-info>info</a></code> property of the
     corresponding <code>NavigateEvent</code>.<li><p><code id=dom-navigationnavigateoptions-state>state</code> can be set to any
     <a href=structured-data.html#serializable-objects id=navigation-api-initiating-navigations:serializable-objects>serializable</a> value; it will populate the state
     retrieved by <code id=navigation-api-initiating-navigations:dom-navigationhistoryentry-getstate><a href=#dom-navigationhistoryentry-getstate>navigation.currentEntry.getState()</a></code> once the
     navigation completes, for same-document navigations. (It will be ignored for navigations that
     end up cross-document.)</ul>

    <p>By default this will perform a full navigation (i.e., a cross-document navigation, unless the
    given URL differs only in a <a href=https://url.spec.whatwg.org/#concept-url-fragment id=navigation-api-initiating-navigations:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> from the current
    one). The <code id=navigation-api-initiating-navigations:dom-navigateevent-intercept><a href=#dom-navigateevent-intercept>navigateEvent.intercept()</a></code> method can
    be used to convert it into a same-document navigation.</p>

    <p>The returned promises will behave as follows:</p>

    <ul><li><p>For navigations that get aborted, both promises will reject with an
     <a id=navigation-api-initiating-navigations:aborterror href=https://webidl.spec.whatwg.org/#aborterror data-x-internal=aborterror>"<code>AbortError</code>"</a> <code id=navigation-api-initiating-navigations:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>For same-document navigations created by using the <code id=navigation-api-initiating-navigations:dom-navigateevent-intercept-2><a href=#dom-navigateevent-intercept>navigateEvent.intercept()</a></code> method, <code>committed</code> will fulfill after the navigation
     commits, and <code>finished</code> will fulfill or
     reject according to any promsies returned by handlers passed to <code id=navigation-api-initiating-navigations:dom-navigateevent-intercept-3><a href=#dom-navigateevent-intercept>intercept()</a></code>.<li><p>For other same-document navigations (e.g., non-intercepted <a href=browsing-the-web.html#navigate-fragid id=navigation-api-initiating-navigations:navigate-fragid>fragment navigations</a>), both promises will fulfill
     immediately.<li><p>For cross-document navigations, or navigations that result in 204 or 205 <a href=https://fetch.spec.whatwg.org/#concept-response-status id=navigation-api-initiating-navigations:concept-response-status data-x-internal=concept-response-status>statuses</a> or `<code id=navigation-api-initiating-navigations:http-content-disposition><a data-x-internal=http-content-disposition href=https://httpwg.org/specs/rfc6266.html>Content-Disposition: attachment</a></code>` header fields from
     the server (and thus do not actually navigate), both promises will never settle.</ul>

    <p>In all cases, when the returned promises fulfill, it will be with the
    <code>NavigationHistoryEntry</code> that was navigated to.</p>
   <dt><code>{ <span>committed</span>, <span>finished</span> } = <span>navigation</span>.<span id=dom-navigation-reload>reload</span>(<var>options</var>)</code><dd>
    <p><a href=browsing-the-web.html#reload id=navigation-api-initiating-navigations:reload>Reloads</a> the current page. <var>options</var> can contain <code id=navigation-api-initiating-navigations:dom-navigationoptions-info><a href=#dom-navigationoptions-info>info</a></code> and <code id=dom-navigationreloadoptions-state>state</code>, which behave as described above.</p>

    <p>The default behavior of performing a from-network-or-cache reload of the current page can be
    overriden by the using the <code id=navigation-api-initiating-navigations:dom-navigateevent-intercept-4><a href=#dom-navigateevent-intercept>navigateEvent.intercept()</a></code> method. Doing so will mean
    this call only updates state or passes along the appropriate <code id=navigation-api-initiating-navigations:dom-navigationoptions-info-2><a href=#dom-navigationoptions-info>info</a></code>, plus performing whater actions the <code id=navigation-api-initiating-navigations:event-navigate><a href=indices.html#event-navigate>navigate</a></code> event handlers see fit to carry out.</p>

    <p>The returned promises will behave as follows:</p>

    <ul><li><p>If the reload is intercepted by using the <code id=navigation-api-initiating-navigations:dom-navigateevent-intercept-5><a href=#dom-navigateevent-intercept>navigateEvent.intercept()</a></code> method, <code>committed</code> will fulfill after the navigation
     commits, and <code>finished</code> will fulfill or
     reject according to any promsies returned by handlers passed to <code id=navigation-api-initiating-navigations:dom-navigateevent-intercept-6><a href=#dom-navigateevent-intercept>intercept()</a></code>.<li><p>Otherwise, both promises will never settle.</ul>
   <dt><code>{ <span>committed</span>, <span>finished</span> } = <span>navigation</span>.<span id=dom-navigation-traverseto>traverseTo</span>(<var>key</var>)</code><dt><code>{ <span>committed</span>, <span>finished</span> } = <span>navigation</span>.<a href=#dom-navigation-traverseto id=navigation-api-initiating-navigations:dom-navigation-traverseto>traverseTo</a>(<var>key</var>, { <a href=#dom-navigationoptions-info id=navigation-api-initiating-navigations:dom-navigationoptions-info-3>info</a> })</code><dd>
    <p><a href=browsing-the-web.html#apply-the-traverse-history-step id=navigation-api-initiating-navigations:apply-the-traverse-history-step>Traverses</a> to the closest <a id=navigation-api-initiating-navigations:session-history-entry href=browsing-the-web.html#session-history-entry>session
    history entry</a> that matches the <code>NavigationHistoryEntry</code> with the given
    <var>key</var>. <code id=navigation-api-initiating-navigations:dom-navigationoptions-info-4><a href=#dom-navigationoptions-info>info</a></code> can be set to any value;
    it will populate the <code id=navigation-api-initiating-navigations:dom-navigateevent-info-2><a href=#dom-navigateevent-info>info</a></code> property of the
    corresponding <code>NavigateEvent</code>.</p>

    <p>If a traversal to that <a id=navigation-api-initiating-navigations:session-history-entry-2 href=browsing-the-web.html#session-history-entry>session history entry</a> is already in progress, then this
    will return the promises for that original traversal, and <code id=navigation-api-initiating-navigations:dom-navigateevent-info-3><a href=#dom-navigateevent-info>info</a></code> will be ignored.</p>

    <p>The returned promises will behave as follows:</p>

    <ul><li><p>If there is no <code>NavigationHistoryEntry</code> in <code id=navigation-api-initiating-navigations:dom-navigation-entries><a href=#dom-navigation-entries>navigation.entries()</a></code> whose <code id=navigation-api-initiating-navigations:dom-navigationhistoryentry-key><a href=#dom-navigationhistoryentry-key>key</a></code> matches <var>key</var>, both promises will
     reject with an <a id=navigation-api-initiating-navigations:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
     <code id=navigation-api-initiating-navigations:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>For same-document traversals intercepted by the <code id=navigation-api-initiating-navigations:dom-navigateevent-intercept-7><a href=#dom-navigateevent-intercept>navigateEvent.intercept()</a></code> method, <code>committed</code> will fulfill as soon as the traversal
     is processed and <code id=navigation-api-initiating-navigations:dom-navigation-currententry><a href=#dom-navigation-currententry>navigation.currentEntry</a></code> is
     updated, and <code>finished</code> will fulfill or
     reject according to any promsies returned by the handlers passed to <code id=navigation-api-initiating-navigations:dom-navigateevent-intercept-8><a href=#dom-navigateevent-intercept>intercept()</a></code>.<li><p>For non-intercepted same-document travesals, both promises will fulfill as soon as the
     traversal is processed and <code id=navigation-api-initiating-navigations:dom-navigation-currententry-2><a href=#dom-navigation-currententry>navigation.currentEntry</a></code> is updated.<li><p>For cross-document traversals, including attempted cross-document traversals that end up
     resulting in a 204 or 205 <a href=https://fetch.spec.whatwg.org/#concept-response-status id=navigation-api-initiating-navigations:concept-response-status-2 data-x-internal=concept-response-status>statuses</a> or `<code id=navigation-api-initiating-navigations:http-content-disposition-2><a data-x-internal=http-content-disposition href=https://httpwg.org/specs/rfc6266.html>Content-Disposition: attachment</a></code>` header fields from
     the server (and thus do not actually traverse), both promises will never settle.</ul>
   <dt><code>{ <span>committed</span>, <span>finished</span> } = <span>navigation</span>.<span id=dom-navigation-back>back</span>(<var>key</var>)</code><dt><code>{ <span>committed</span>, <span>finished</span> } = <span>navigation</span>.<a href=#dom-navigation-back id=navigation-api-initiating-navigations:dom-navigation-back>back</a>(<var>key</var>, { <a href=#dom-navigationoptions-info id=navigation-api-initiating-navigations:dom-navigationoptions-info-5>info</a> })</code><dd>
    <p>Traverses to the closest previous <a id=navigation-api-initiating-navigations:session-history-entry-3 href=browsing-the-web.html#session-history-entry>session history entry</a> which results in this
    <a id=navigation-api-initiating-navigations:navigable href=document-sequences.html#navigable>navigable</a> traversing, i.e., which corresponds to a different
    <code>NavigationHistoryEntry</code> and thus will cause <code id=navigation-api-initiating-navigations:dom-navigation-currententry-3><a href=#dom-navigation-currententry>navigation.currentEntry</a></code> to change. <code id=navigation-api-initiating-navigations:dom-navigationoptions-info-6><a href=#dom-navigationoptions-info>info</a></code> can be set to any value; it will populate the
    <code id=navigation-api-initiating-navigations:dom-navigateevent-info-4><a href=#dom-navigateevent-info>info</a></code> property of the corresponding
    <code>NavigateEvent</code>.</p>

    <p>If a traversal to that <a id=navigation-api-initiating-navigations:session-history-entry-4 href=browsing-the-web.html#session-history-entry>session history entry</a> is already in progress, then this
    will return the promises for that original traversal, and <code id=navigation-api-initiating-navigations:dom-navigateevent-info-5><a href=#dom-navigateevent-info>info</a></code> will be ignored.</p>

    <p>The returned promises behave equivalently to those returned by <code id=navigation-api-initiating-navigations:dom-navigation-traverseto-2><a href=#dom-navigation-traverseto>traverseTo()</a></code>.</p>
   <dt><code>{ <span>committed</span>, <span>finished</span> } = <span>navigation</span>.<span id=dom-navigation-forward>forward</span>(<var>key</var>)</code><dt><code>{ <span>committed</span>, <span>finished</span> } = <span>navigation</span>.<a href=#dom-navigation-forward id=navigation-api-initiating-navigations:dom-navigation-forward>forward</a>(<var>key</var>, { <a href=#dom-navigationoptions-info id=navigation-api-initiating-navigations:dom-navigationoptions-info-7>info</a> })</code><dd>
    <p>Traverses to the closest forward <a id=navigation-api-initiating-navigations:session-history-entry-5 href=browsing-the-web.html#session-history-entry>session history entry</a> which results in this
    <a id=navigation-api-initiating-navigations:navigable-2 href=document-sequences.html#navigable>navigable</a> traversing, i.e., which corresponds to a different
    <code>NavigationHistoryEntry</code> and thus will cause <code id=navigation-api-initiating-navigations:dom-navigation-currententry-4><a href=#dom-navigation-currententry>navigation.currentEntry</a></code> to change. <code id=navigation-api-initiating-navigations:dom-navigationoptions-info-8><a href=#dom-navigationoptions-info>info</a></code> can be set to any value; it will populate the
    <code id=navigation-api-initiating-navigations:dom-navigateevent-info-6><a href=#dom-navigateevent-info>info</a></code> property of the corresponding
    <code>NavigateEvent</code>.</p>

    <p>If a traversal to that <a id=navigation-api-initiating-navigations:session-history-entry-6 href=browsing-the-web.html#session-history-entry>session history entry</a> is already in progress, then this
    will return the promises for that original traversal, and <code id=navigation-api-initiating-navigations:dom-navigateevent-info-7><a href=#dom-navigateevent-info>info</a></code> will be ignored.</p>

    <p>The returned promises behave equivalently to those returned by <code id=navigation-api-initiating-navigations:dom-navigation-traverseto-3><a href=#dom-navigation-traverseto>traverseTo()</a></code>.</p>
   </dl>

  


  <h5 id=ongoing-navigation-tracking><span class=secno>7.2.5.7</span> Ongoing navigation tracking<a href=#ongoing-navigation-tracking class=self-link></a></h5>

  

  <dl class=domintro><dt><code><span>navigation</span>.<span id=dom-navigation-transition>transition</span></code><dd>
    <p>A <code>NavigationTransition</code> representing any ongoing navigation that hasn't yet
    reached the <code id=ongoing-navigation-tracking:event-navigatesuccess><a href=indices.html#event-navigatesuccess>navigatesuccess</a></code> or <code id=ongoing-navigation-tracking:event-navigateerror><a href=indices.html#event-navigateerror>navigateerror</a></code> stage, if one exists; or null, if there is no
    such transition ongoing.</p>

    <p>Since <code id=ongoing-navigation-tracking:dom-navigation-currententry><a href=#dom-navigation-currententry>navigation.currentEntry</a></code> (and other
    properties like <code id=ongoing-navigation-tracking:dom-location-href><a href=#dom-location-href>location.href</a></code>) are updated immediately
    upon navigation, this <code id=ongoing-navigation-tracking:dom-navigation-transition><a href=#dom-navigation-transition>navigation.transition</a></code>
    property is useful for determining when such navigations are not yet fully settled, according to
    any handlers passed to <code id=ongoing-navigation-tracking:dom-navigateevent-intercept><a href=#dom-navigateevent-intercept>navigateEvent.intercept()</a></code>.</p>
   <dt><code><span>navigation</span>.<a href=#dom-navigation-transition id=ongoing-navigation-tracking:dom-navigation-transition-2>transition</a>.<span id=dom-navigationtransition-navigationtype>navigationType</span></code><dd><p>One of "<code id=ongoing-navigation-tracking:dom-navigationtype-push><a href=#dom-navigationtype-push>push</a></code>", "<code id=ongoing-navigation-tracking:dom-navigationtype-replace><a href=#dom-navigationtype-replace>replace</a></code>", "<code id=ongoing-navigation-tracking:dom-navigationtype-reload><a href=#dom-navigationtype-reload>reload</a></code>", or "<code id=ongoing-navigation-tracking:dom-navigationtype-traverse><a href=#dom-navigationtype-traverse>traverse</a></code>", indicating what type of navigation this
   transition is for.<dt><code><span>navigation</span>.<a href=#dom-navigation-transition id=ongoing-navigation-tracking:dom-navigation-transition-3>transition</a>.<span id=dom-navigationtransition-from>from</span></code><dd><p>The <code>NavigationHistoryEntry</code> from which the transition is coming. This can be
   useful to compare against <code id=ongoing-navigation-tracking:dom-navigation-currententry-2><a href=#dom-navigation-currententry>navigation.currentEntry</a></code>.<dt><code><span>navigation</span>.<a href=#dom-navigation-transition id=ongoing-navigation-tracking:dom-navigation-transition-4>transition</a>.<span id=dom-navigationtransition-committed>committed</span></code><dd><p>A promise which fulfills once the <code id=ongoing-navigation-tracking:dom-navigation-currententry-3><a href=#dom-navigation-currententry>navigation.currentEntry</a></code> and <a href=https://dom.spec.whatwg.org/#concept-document-url id="ongoing-navigation-tracking:the-document's-address" data-x-internal="the-document's-address">URL</a> change. This occurs after all of its <a href=#dom-navigationinterceptoptions-precommithandler id=ongoing-navigation-tracking:dom-navigationinterceptoptions-precommithandler>precommit handlers</a> are fulfilled.
   The promise rejects if one or more of the <a href=#dom-navigationinterceptoptions-precommithandler id=ongoing-navigation-tracking:dom-navigationinterceptoptions-precommithandler-2>precommit handlers</a>
   rejects.<dt><code><span>navigation</span>.<a href=#dom-navigation-transition id=ongoing-navigation-tracking:dom-navigation-transition-5>transition</a>.<span id=dom-navigationtransition-finished>finished</span></code><dd><p>A promise which fulfills at the same time as the <code id=ongoing-navigation-tracking:event-navigatesuccess-2><a href=indices.html#event-navigatesuccess>navigatesuccess</a></code> fires, or rejects at the same time the
   <code id=ongoing-navigation-tracking:event-navigateerror-2><a href=indices.html#event-navigateerror>navigateerror</a></code> event fires.</dl>

  


  <h5 id=navigation-activation-interface><span class=secno>7.2.5.8</span> The <code>NavigationActivation</code> interface<a href=#navigation-activation-interface class=self-link></a></h5>

  

  <dl class=domintro><dt><code><span>navigation</span>.<a href=#dom-navigation-activation-2 id=dom-navigation-activation>activation</a></code><dd>
    <p>A <code>NavigationActivation</code> containing information about the most recent
    cross-document navigation, the navigation that "activated" this <code>Document</code>.</p>

    <p>While <code id=navigation-activation-interface:dom-navigation-currententry><a href=#dom-navigation-currententry>navigation.currentEntry</a></code> and the
    <code>Document</code>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="navigation-activation-interface:the-document's-address" data-x-internal="the-document's-address">URL</a> can be updated regularly
    due to same-document navigations, <code id=navigation-activation-interface:dom-navigation-activation-2><a href=#dom-navigation-activation-2>navigation.activation</a></code> stays constant, and its properties
    are only updated if the <code>Document</code> is <a href=browsing-the-web.html#reactivate-a-document id=navigation-activation-interface:reactivate-a-document>reactivated</a> from history.</p>
   <dt><code><span>navigation</span>.<a href=#dom-navigation-activation-2 id=navigation-activation-interface:dom-navigation-activation-2-2>activation</a>.<a href=#dom-navigationactivation-entry-2 id=dom-navigationactivation-entry>entry</a></code><dd><p>A <code>NavigationHistoryEntry</code>, equivalent to the value of the <code id=navigation-activation-interface:dom-navigation-currententry-2><a href=#dom-navigation-currententry>navigation.currentEntry</a></code> property at the moment the
   <code>Document</code> was activated.<dt><code><span>navigation</span>.<a href=#dom-navigation-activation-2 id=navigation-activation-interface:dom-navigation-activation-2-3>activation</a>.<a href=#dom-navigationactivation-from-2 id=dom-navigationactivation-from>from</a></code><dd>
    <p>A <code>NavigationHistoryEntry</code>, representing the <code>Document</code> that was active
    right before the current <code>Document</code>. This will have a value null in case the
    previous <code>Document</code> was not <a id=navigation-activation-interface:same-origin href=browsers.html#same-origin>same origin</a> with this one or if it was the
    <a href=dom.html#is-initial-about:blank id=navigation-activation-interface:is-initial-about:blank>initial <code>about:blank</code></a>
    <code>Document</code>.</p>

    <p>There are some cases in which either the <code id=navigation-activation-interface:dom-navigationactivation-from-2><a href=#dom-navigationactivation-from-2>from</a></code> or <code id=navigation-activation-interface:dom-navigationactivation-entry-2><a href=#dom-navigationactivation-entry-2>entry</a></code> <code>NavigationHistoryEntry</code> objects
    would not be viable targets for the <code id=navigation-activation-interface:dom-navigation-traverseto><a href=#dom-navigation-traverseto>traverseTo()</a></code>
    method, as they might not be retained in history. For example, the <code>Document</code> can be
    activated using <code id=navigation-activation-interface:dom-location-replace><a href=#dom-location-replace>location.replace()</a></code> or its initial
    entry could be replaced by <code id=navigation-activation-interface:dom-history-replacestate><a href=#dom-history-replacestate>history.replaceState()</a></code>. However, those entries' <code id=navigation-activation-interface:dom-navigationhistoryentry-url><a href=#dom-navigationhistoryentry-url>url</a></code> property and <code id=navigation-activation-interface:dom-navigationhistoryentry-getstate><a href=#dom-navigationhistoryentry-getstate>getState()</a></code> method are still accessible.</p>
   <dt><code><span>navigation</span>.<a href=#dom-navigation-activation-2 id=navigation-activation-interface:dom-navigation-activation-2-4>activation</a>.<a href=#dom-navigationactivation-navigationtype-2 id=dom-navigationactivation-navigationtype>navigationType</a></code><dd><p>One of "<code id=navigation-activation-interface:dom-navigationtype-push><a href=#dom-navigationtype-push>push</a></code>", "<code id=navigation-activation-interface:dom-navigationtype-replace><a href=#dom-navigationtype-replace>replace</a></code>", "<code id=navigation-activation-interface:dom-navigationtype-reload><a href=#dom-navigationtype-reload>reload</a></code>", or "<code id=navigation-activation-interface:dom-navigationtype-traverse><a href=#dom-navigationtype-traverse>traverse</a></code>", indicating what type of navigation
   activated this <code>Document</code>.</dl>

  <p>Each <code>Navigation</code> has an associated <dfn id=navigation-activation>activation</dfn>, which is null or a
  <code>NavigationActivation</code> object, initially null.</p>

  <p>Each <code>NavigationActivation</code> has:</p>

  <ul><li><p><dfn id=nav-activation-old-entry>old entry</dfn>, null or a
   <code>NavigationHistoryEntry</code>.<li><p><dfn id=nav-activation-new-entry>new entry</dfn>, null or a
   <code>NavigationHistoryEntry</code>.<li><p><dfn id=nav-activation-navigation-type>navigation type</dfn>, a
   <code>NavigationType</code>.</ul>

  <p>The <dfn data-dfn-for=Navigation id=dom-navigation-activation-2 data-dfn-type=attribute><code>activation</code></dfn> getter steps are to return
  <a id=navigation-activation-interface:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#navigation-activation id=navigation-activation-interface:navigation-activation>activation</a>.</p>

  <p>The <dfn data-dfn-for=NavigationActivation id=dom-navigationactivation-from-2 data-dfn-type=attribute><code>from</code></dfn> getter steps are to return
  <a id=navigation-activation-interface:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#nav-activation-old-entry id=navigation-activation-interface:nav-activation-old-entry>old entry</a>.</p>

  <p>The <dfn data-dfn-for=NavigationActivation id=dom-navigationactivation-entry-2 data-dfn-type=attribute><code>entry</code></dfn> getter steps are to return
  <a id=navigation-activation-interface:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#nav-activation-new-entry id=navigation-activation-interface:nav-activation-new-entry>new entry</a>.</p>

  <p>The <dfn data-dfn-for=NavigationActivation id=dom-navigationactivation-navigationtype-2 data-dfn-type=attribute><code>navigationType</code></dfn> getter steps are to
  return <a id=navigation-activation-interface:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#nav-activation-navigation-type id=navigation-activation-interface:nav-activation-navigation-type>navigation type</a>.</p>


  <h5 id=the-navigate-event><span class=secno>7.2.5.9</span> The <code id=the-navigate-event:event-navigate><a href=indices.html#event-navigate>navigate</a></code> event<a href=#the-navigate-event class=self-link></a></h5>

  <p>A major feature of the navigation API is the <code id=the-navigate-event:event-navigate-2><a href=indices.html#event-navigate>navigate</a></code>
  event. This event is fired on any navigation (in the <span>broad sense of
  the word</span>), allowing web developers to monitor such outgoing navigations. In many cases, the
  event is <code id=the-navigate-event:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code>, which allows preventing the
  navigation from happening. And in others, the navigation can be intercepted and replaced with a
  same-document navigation by using the <code id=the-navigate-event:dom-navigateevent-intercept><a href=#dom-navigateevent-intercept>intercept()</a></code> method of the <code>NavigateEvent</code>
  class.</p>

  <h6 id=the-navigateevent-interface><span class=secno>7.2.5.9.1</span> The <code>NavigateEvent</code> interface<a href=#the-navigateevent-interface class=self-link></a></h6>

  

  <dl class=domintro><dt><code><var>event</var>.<span id=dom-navigateevent-navigationtype>navigationType</span></code><dd><p>One of "<code id=the-navigateevent-interface:dom-navigationtype-push><a href=#dom-navigationtype-push>push</a></code>", "<code id=the-navigateevent-interface:dom-navigationtype-replace><a href=#dom-navigationtype-replace>replace</a></code>", "<code id=the-navigateevent-interface:dom-navigationtype-reload><a href=#dom-navigationtype-reload>reload</a></code>", or "<code id=the-navigateevent-interface:dom-navigationtype-traverse><a href=#dom-navigationtype-traverse>traverse</a></code>", indicating what type of navigation this
   is.<dt><code><var>event</var>.<span id=dom-navigateevent-destination>destination</span></code><dd><p>A <code>NavigationDestination</code> representing the destination of the
   navigation.<dt><code><var>event</var>.<span id=dom-navigateevent-canintercept>canIntercept</span></code><dd>
    <p>True if <code id=the-navigateevent-interface:dom-navigateevent-intercept><a href=#dom-navigateevent-intercept>intercept()</a></code> can be called to
    intercept this navigation and convert it into a same-document navigation, replacing its usual
    behavior; false otherwise.</p>

    <p>Generally speaking, this will be true whenever the current <code>Document</code> <a href=#can-have-its-url-rewritten id=the-navigateevent-interface:can-have-its-url-rewritten>can
    have its URL rewritten</a> to the destination URL, except for in the case of cross-document
    "<code id=the-navigateevent-interface:dom-navigationtype-traverse-2><a href=#dom-navigationtype-traverse>traverse</a></code>" navigations, where it will always
    be false.</p>
   <dt><code><var>event</var>.<span id=dom-navigateevent-userinitiated>userInitiated</span></code><dd><p>True if this navigation was due to a user clicking on an <code id=the-navigateevent-interface:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element,
   submitting a <code id=the-navigateevent-interface:the-form-element><a href=forms.html#the-form-element>form</a></code> element, or using the <a href=speculative-loading.html#nav-traversal-ui>browser UI</a>
   to navigate; false otherwise.<dt><code><var>event</var>.<span id=dom-navigateevent-hashchange>hashChange</span></code><dd><p>True for a <a href=browsing-the-web.html#navigate-fragid id=the-navigateevent-interface:navigate-fragid>fragment navigation</a>; false
   otherwise.<dt><code><var>event</var>.<span id=dom-navigateevent-signal>signal</span></code><dd>
    <p>An <code id=the-navigateevent-interface:abortsignal><a data-x-internal=abortsignal href=https://dom.spec.whatwg.org/#abortsignal>AbortSignal</a></code> which will become aborted if the navigation gets canceled, e.g.,
    by the user pressing their browser's "Stop" button, or by another navigation interrupting this
    one.</p>

    <p>The expected pattern is for developers to pass this along to any async operations, such as
    <code id=the-navigateevent-interface:fetch()><a data-x-internal=fetch() href=https://fetch.spec.whatwg.org/#dom-global-fetch>fetch()</a></code>, which they perform as part of handling this navigation.</p>
   <dt><code><var>event</var>.<span id=dom-navigateevent-formdata>formData</span></code><dd>
    <p>The <code id=the-navigateevent-interface:formdata><a data-x-internal=formdata href=https://xhr.spec.whatwg.org/#formdata>FormData</a></code> representing the submitted form entries for this navigation, if
    this navigation is a "<code id=the-navigateevent-interface:dom-navigationtype-push-2><a href=#dom-navigationtype-push>push</a></code>" or "<code id=the-navigateevent-interface:dom-navigationtype-replace-2><a href=#dom-navigationtype-replace>replace</a></code>" navigation representing a POST <span>form submission</span>; null otherwise.</p>

    <p>(Notably, this will be null even for "<code id=the-navigateevent-interface:dom-navigationtype-reload-2><a href=#dom-navigationtype-reload>reload</a></code>"
    or "<code id=the-navigateevent-interface:dom-navigationtype-traverse-3><a href=#dom-navigationtype-traverse>traverse</a></code>" navigations that are revisiting
    a <a id=the-navigateevent-interface:session-history-entry href=browsing-the-web.html#session-history-entry>session history entry</a> that was originally created from a form submission.)</p>
   <dt><code><var>event</var>.<span id=dom-navigateevent-downloadrequest>downloadRequest</span></code><dd>
    <p>Represents whether or not this navigation was requested to be a download, by using an
    <code id=the-navigateevent-interface:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> or <code id=the-navigateevent-interface:the-area-element><a href=image-maps.html#the-area-element>area</a></code> element's <code id=the-navigateevent-interface:attr-hyperlink-download><a href=links.html#attr-hyperlink-download>download</a></code> attribute:</p>

    <ul><li><p>If a download was not requested, then this property is null.<li><p>If a download was requested, returns the filename that was supplied as the <code id=the-navigateevent-interface:attr-hyperlink-download-2><a href=links.html#attr-hyperlink-download>download</a></code> attribute's value. (This could be the empty
     string.)</ul>

    <p>Note that a download being requested does not always mean that a download will happen: for
    example, a download might be blocked by browser security policies, or end up being treated as a
    "<code id=the-navigateevent-interface:navigationhistorybehavior-push><a href=browsing-the-web.html#navigationhistorybehavior-push>push</a></code>" navigation for <a href=https://github.com/whatwg/html/issues/7718 class=XXX>unspecified reasons</a>.</p>

    <p>Similarly, a navigation might end up being a download even if it was not requested to be one,
    due to the destination server responding with a `<code id=the-navigateevent-interface:http-content-disposition><a data-x-internal=http-content-disposition href=https://httpwg.org/specs/rfc6266.html>Content-Disposition: attachment</a></code>` header.</p>

    <p>Finally, note that the <code id=the-navigateevent-interface:event-navigate><a href=indices.html#event-navigate>navigate</a></code> event will not fire at
    all for downloads initiated using browser UI affordances, e.g., those created by right-clicking
    and choosing to save the target of a link.</p>
   <dt><code><var>event</var>.<span id=dom-navigateevent-info>info</span></code><dd><p>An arbitrary JavaScript value passed via one of the <a href=#navigation-api-initiating-navigations>navigation API methods</a> which initiated this
   navigation, or undefined if the navigation was initiated by the user or by a different
   API.<dt><code><var>event</var>.<span id=dom-navigateevent-hasuavisualtransition>hasUAVisualTransition</span></code><dd><p>Returns true if the user agent performed a visual transition for this navigation before
   dispatching this event. If true, the best user experience will be given if the author
   synchronously updates the DOM to the post-navigation state.<dt><code><var>event</var>.<span id=dom-navigateevent-sourceelement>sourceElement</span></code><dd><p>Returns the <code id=the-navigateevent-interface:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> responsible for this navigation. This can be an
   <code id=the-navigateevent-interface:the-a-element-3><a href=text-level-semantics.html#the-a-element>a</a></code>or <code id=the-navigateevent-interface:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> element, a <a href=forms.html#concept-submit-button id=the-navigateevent-interface:concept-submit-button>submit button</a>, or a submitted <code id=the-navigateevent-interface:the-form-element-2><a href=forms.html#the-form-element>form</a></code>
   element.<dt><code><var>event</var>.<span id=dom-navigateevent-intercept>intercept</span>({ <span id=dom-navigationinterceptoptions-precommithandler>precommitHandler</span>, <span id=dom-navigationinterceptoptions-handler>handler</span>, <span id=dom-navigationinterceptoptions-focusreset>focusReset</span>, <span id=dom-navigationinterceptoptions-scroll>scroll</span> })</code><dd>
    <p>Intercepts this navigation, preventing its normal handling and instead converting it into a
    same-document navigation of the same type to the destination URL.</p>

    <p>The <code id=the-navigateevent-interface:dom-navigationinterceptoptions-precommithandler><a href=#dom-navigationinterceptoptions-precommithandler>precommitHandler</a></code>
    option can be a function that accepts a <code>NavigationPrecommitController</code> and returns a
    promise. The precommit handler function will run after the <code id=the-navigateevent-interface:event-navigate-2><a href=indices.html#event-navigate>navigate</a></code> event has finished firing, but before the <code id=the-navigateevent-interface:dom-navigation-currententry><a href=#dom-navigation-currententry>navigation.currentEntry</a></code> property has been updated.
    Returning a rejected promise will abort the navigation and its effect, such as updating the URL
    and session history. After all the precommit handlers are fulfilled, the navigation can proceed
    to commit and call the rest of the handlers. The <code id=the-navigateevent-interface:dom-navigationinterceptoptions-precommithandler-2><a href=#dom-navigationinterceptoptions-precommithandler>precommitHandler</a></code> option can only
    be passed when the event is <code id=the-navigateevent-interface:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code>: trying to
    pass a <code id=the-navigateevent-interface:dom-navigationinterceptoptions-precommithandler-3><a href=#dom-navigationinterceptoptions-precommithandler>precommitHandler</a></code> to
    a non-cancelable <code>NavigateEvent</code> will throw a
    <a id=the-navigateevent-interface:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=the-navigateevent-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>

    <p>The <code id=the-navigateevent-interface:dom-navigationinterceptoptions-handler><a href=#dom-navigationinterceptoptions-handler>handler</a></code> option can be a
    function that returns a promise. The handler function will run after the <code id=the-navigateevent-interface:event-navigate-3><a href=indices.html#event-navigate>navigate</a></code> event has finished firing and the <code id=the-navigateevent-interface:dom-navigation-currententry-2><a href=#dom-navigation-currententry>navigation.currentEntry</a></code> property has been updated.
    This returned promise is used to signal the duration, and success or failure, of the navigation.
    After it settles, the browser signals to the user (e.g., via a loading spinner UI, or assistive
    technology) that the navigation is finished. Additionally, it fires <code id=the-navigateevent-interface:event-navigatesuccess><a href=indices.html#event-navigatesuccess>navigatesuccess</a></code> or <code id=the-navigateevent-interface:event-navigateerror><a href=indices.html#event-navigateerror>navigateerror</a></code> events as appropriate, which other parts of
    the web application can respond to.</p>

    <p>By default, using this method will cause focus to reset when any handlers' returned promises
    settle. Focus will be reset to the first element with the <code id=the-navigateevent-interface:attr-fe-autofocus><a href=interaction.html#attr-fe-autofocus>autofocus</a></code> attribute set, or <a id=the-navigateevent-interface:the-body-element-2 href=dom.html#the-body-element-2>the body element</a> if
    the attribute isn't present. The <code id=the-navigateevent-interface:dom-navigationinterceptoptions-focusreset><a href=#dom-navigationinterceptoptions-focusreset>focusReset</a></code> option can be set to "<code>manual</code>" to avoid this behavior.</p>

    <p>By default, using this method will delay the browser's scroll restoration logic for "<code id=the-navigateevent-interface:dom-navigationtype-traverse-4><a href=#dom-navigationtype-traverse>traverse</a></code>" or "<code id=the-navigateevent-interface:dom-navigationtype-reload-3><a href=#dom-navigationtype-reload>reload</a></code>" navigations, or its
    scroll-reset/scroll-to-a-fragment logic for "<code id=the-navigateevent-interface:dom-navigationtype-push-3><a href=#dom-navigationtype-push>push</a></code>"
    or "<code id=the-navigateevent-interface:dom-navigationtype-replace-3><a href=#dom-navigationtype-replace>replace</a></code>" navigations, until any handlers'
    returned promises settle. The <code id=the-navigateevent-interface:dom-navigationinterceptoptions-scroll><a href=#dom-navigationinterceptoptions-scroll>scroll</a></code>
    option can be set to "<code>manual</code>" to turn
    off any browser-driven scroll behavior entirely for this navigation, or <code id=the-navigateevent-interface:dom-navigateevent-scroll><a href=#dom-navigateevent-scroll>scroll()</a></code> can be called before the promise settles to
    trigger this behavior early.</p>

    <p>This method will throw a <a id=the-navigateevent-interface:securityerror-2 href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=the-navigateevent-interface:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>
    if <code id=the-navigateevent-interface:dom-navigateevent-canintercept><a href=#dom-navigateevent-canintercept>canIntercept</a></code> is false, or if <code id=the-navigateevent-interface:dom-event-istrusted><a data-x-internal=dom-event-istrusted href=https://dom.spec.whatwg.org/#dom-event-istrusted>isTrusted</a></code> is false. It will throw an
    <a id=the-navigateevent-interface:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-navigateevent-interface:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if not called
    synchronously, during event dispatch.</p>
   <dt><code><var>event</var>.<span id=dom-navigateevent-scroll>scroll</span>()</code><dd>
    <p>For "<code id=the-navigateevent-interface:dom-navigationtype-traverse-5><a href=#dom-navigationtype-traverse>traverse</a></code>" or "<code id=the-navigateevent-interface:dom-navigationtype-reload-4><a href=#dom-navigationtype-reload>reload</a></code>" navigations, restores the scroll position
    using the browser's usual scroll restoration logic.</p>

    <p>For "<code id=the-navigateevent-interface:dom-navigationtype-push-4><a href=#dom-navigationtype-push>push</a></code>" or "<code id=the-navigateevent-interface:dom-navigationtype-replace-4><a href=#dom-navigationtype-replace>replace</a></code>" navigations, either resets the scroll
    position to the top of the document or scrolls to the <a href=https://url.spec.whatwg.org/#concept-url-fragment id=the-navigateevent-interface:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> specified by <code>destination.url</code> if there is one.</p>

    <p>If called more than once, or called after automatic post-transition scroll processing has
    happened due to the <code id=the-navigateevent-interface:dom-navigationinterceptoptions-scroll-2><a href=#dom-navigationinterceptoptions-scroll>scroll</a></code> option
    being left as "<code>after-transition</code>", or called
    before the navigation has committed, this method will throw an
    <a id=the-navigateevent-interface:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-navigateevent-interface:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>
   </dl>

  

  <h6 id=the-navigationprecommitcontroller-interface><span class=secno>7.2.5.9.2</span> The <code>NavigationPrecommitController</code> interface<a href=#the-navigationprecommitcontroller-interface class=self-link></a></h6>

  

  <dl class=domintro><dt><code><var>precommitController</var>.<span id=dom-navigationprecommitcontroller-redirect>redirect</span>(USVString <var>url</var>, <span>NavigationNavigateOptions</span> <var>options</var>)</code><dd>
    <p>For "<code id=the-navigationprecommitcontroller-interface:dom-navigationtype-push><a href=#dom-navigationtype-push>push</a></code>" or "<code id=the-navigationprecommitcontroller-interface:dom-navigationtype-replace><a href=#dom-navigationtype-replace>replace</a></code>" navigations, sets the <code>destination.url</code> to <var>url</var>.</p>

    <p>If <var>options</var> is given, also sets the <code id=the-navigationprecommitcontroller-interface:dom-navigateevent-info><a href=#dom-navigateevent-info>info</a></code> and the resulting
    <code>NavigationHistoryEntry</code>'s <span>state</span> to <var>options</var>'s <code id=the-navigationprecommitcontroller-interface:dom-navigationoptions-info><a href=#dom-navigationoptions-info>info</a></code> and <code id=the-navigationprecommitcontroller-interface:dom-navigationnavigateoptions-state><a href=#dom-navigationnavigateoptions-state>state</a></code>, if they are present. The <code id=the-navigationprecommitcontroller-interface:dom-navigationnavigateoptions-history><a href=#dom-navigationnavigateoptions-history>history</a></code> option can also switch between
    "<code id=the-navigationprecommitcontroller-interface:dom-navigationtype-push-2><a href=#dom-navigationtype-push>push</a></code>" or "<code id=the-navigationprecommitcontroller-interface:dom-navigationtype-replace-2><a href=#dom-navigationtype-replace>replace</a></code>" navigations types.</p>

    <p>For "<code id=the-navigationprecommitcontroller-interface:dom-navigationtype-reload><a href=#dom-navigationtype-reload>reload</a></code>" or "<code id=the-navigationprecommitcontroller-interface:dom-navigationtype-traverse><a href=#dom-navigationtype-traverse>traverse</a></code>" navigations, an
    <a id=the-navigationprecommitcontroller-interface:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> will be thrown.</p>

    <p>If the current <code>Document</code> <a href=#can-have-its-url-rewritten id=the-navigationprecommitcontroller-interface:can-have-its-url-rewritten>cannot have
    its URL rewritten</a> to <var>url</var>, a <a id=the-navigationprecommitcontroller-interface:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a>
    <code id=the-navigationprecommitcontroller-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> will be thrown.</p>
  </dl>

  

  <h6 id=the-navigationdestination-interface><span class=secno>7.2.5.9.3</span> The <code>NavigationDestination</code> interface<a href=#the-navigationdestination-interface class=self-link></a></h6>

  

  <dl class=domintro><dt><code><var>event</var>.<a href=#dom-navigateevent-destination id=the-navigationdestination-interface:dom-navigateevent-destination>destination</a>.<span>url</span></code><dd><p>The URL being navigated to.<dt><code><var>event</var>.<a href=#dom-navigateevent-destination id=the-navigationdestination-interface:dom-navigateevent-destination-2>destination</a>.<span>key</span></code><dd><p>The value of the <code id=the-navigationdestination-interface:dom-navigationhistoryentry-key><a href=#dom-navigationhistoryentry-key>key</a></code> property of the
   destination <code>NavigationHistoryEntry</code>, if this is a "<code id=the-navigationdestination-interface:dom-navigationtype-traverse><a href=#dom-navigationtype-traverse>traverse</a></code>" navigation, or the empty string otherwise. <dt><code><var>event</var>.<a href=#dom-navigateevent-destination id=the-navigationdestination-interface:dom-navigateevent-destination-3>destination</a>.<span>id</span></code><dd><p>The value of the <code id=the-navigationdestination-interface:dom-navigationhistoryentry-id><a href=#dom-navigationhistoryentry-id>id</a></code> property of the
   destination <code>NavigationHistoryEntry</code>, if this is a "<code id=the-navigationdestination-interface:dom-navigationtype-traverse-2><a href=#dom-navigationtype-traverse>traverse</a></code>" navigation, or the empty string otherwise. <dt><code><var>event</var>.<a href=#dom-navigateevent-destination id=the-navigationdestination-interface:dom-navigateevent-destination-4>destination</a>.<span>index</span></code><dd><p>The value of the <code id=the-navigationdestination-interface:dom-navigationhistoryentry-index><a href=#dom-navigationhistoryentry-index>index</a></code> property of
   the destination <code>NavigationHistoryEntry</code>, if this is a "<code id=the-navigationdestination-interface:dom-navigationtype-traverse-3><a href=#dom-navigationtype-traverse>traverse</a></code>" navigation, or −1 otherwise.
   <dt><code><var>event</var>.<a href=#dom-navigateevent-destination id=the-navigationdestination-interface:dom-navigateevent-destination-5>destination</a>.<span>sameDocument</span></code><dd>
    <p>Indicates whether or not this navigation is to the same <code>Document</code> as the current
    one, or not. This will be true, for example, in the case of fragment navigations or <code id=the-navigationdestination-interface:dom-history-pushstate><a href=#dom-history-pushstate>history.pushState()</a></code> navigations.</p>

    <p>Note that this property indicates the original nature of the navigation. If a cross-document
    navigation is converted into a same-document navigation using <code id=the-navigationdestination-interface:dom-navigateevent-intercept><a href=#dom-navigateevent-intercept>navigateEvent.intercept()</a></code>, that will not change the
    value of this property.</p>
   <dt><code><var>event</var>.<a href=#dom-navigateevent-destination id=the-navigationdestination-interface:dom-navigateevent-destination-6>destination</a>.<span>getState</span>()</code><dd>
    <p>For "<code id=the-navigationdestination-interface:dom-navigationtype-traverse-4><a href=#dom-navigationtype-traverse>traverse</a></code>" navigations, returns the
    <span>deserialization</span> of the state stored in the
    destination <a id=the-navigationdestination-interface:session-history-entry href=browsing-the-web.html#session-history-entry>session history entry</a>.</p>

    <p>For "<code id=the-navigationdestination-interface:dom-navigationtype-push><a href=#dom-navigationtype-push>push</a></code>" or "<code id=the-navigationdestination-interface:dom-navigationtype-replace><a href=#dom-navigationtype-replace>replace</a></code>" navigations, returns the <span>deserialization</span> of the state passed to <code id=the-navigationdestination-interface:dom-navigation-navigate><a href=#dom-navigation-navigate>navigation.navigate()</a></code>, if the navigation was initiated
    by that method, or undefined it if it wasn't.</p>

    <p>For "<code id=the-navigationdestination-interface:dom-navigationtype-reload><a href=#dom-navigationtype-reload>reload</a></code>" navigations, returns the <span>deserialization</span> of the state passed to <code id=the-navigationdestination-interface:dom-navigation-reload><a href=#dom-navigation-reload>navigation.reload()</a></code>, if the reload was initiated by that
    method, or undefined it if it wasn't.</p>
   </dl>

  

  <h4 id=nav-traversal-event-interfaces><span class=secno>7.2.6</span> Event interfaces<a href=#nav-traversal-event-interfaces class=self-link></a></h4>

  <p class=note>The <code>NavigateEvent</code> interface has <a href=#the-navigate-event>its own
  dedicated section</a>, due to its complexity.</p>


  <h5 id=the-navigationcurrententrychangeevent-interface><span class=secno>7.2.6.1</span> The <code>NavigationCurrentEntryChangeEvent</code> interface<a href=#the-navigationcurrententrychangeevent-interface class=self-link></a></h5>

  

  <dl class=domintro><dt><code><var>event</var>.<span id=dom-navigationcurrententrychangeevent-navigationtype>navigationType</span></code><dd><p>Returns the type of navigation which caused the current entry to change, or null if the
   change is due to <code id=the-navigationcurrententrychangeevent-interface:dom-navigation-updatecurrententry><a href=#dom-navigation-updatecurrententry>navigation.updateCurrentEntry()</a></code>.<dt><code><var>event</var>.<span id=dom-navigationcurrententrychangeevent-from>from</span></code><dd>
    <p>Returns the previous value of <code id=the-navigationcurrententrychangeevent-interface:dom-navigation-currententry><a href=#dom-navigation-currententry>navigation.currentEntry</a></code>, before the current entry
    changed.</p>

    <p>If <code id=the-navigationcurrententrychangeevent-interface:dom-navigationcurrententrychangeevent-navigationtype><a href=#dom-navigationcurrententrychangeevent-navigationtype>navigationType</a></code>
    is null or "<code id=the-navigationcurrententrychangeevent-interface:dom-navigationtype-reload><a href=#dom-navigationtype-reload>reload</a></code>", then this value will be the
    same as <code id=the-navigationcurrententrychangeevent-interface:dom-navigation-currententry-2><a href=#dom-navigation-currententry>navigation.currentEntry</a></code>. In that case,
    the event signifies that the contents of the entry changed, even if we did not move to a new
    entry or replace the current one.</p>
   </dl>

  


  <h5 id=the-popstateevent-interface><span class=secno>7.2.6.2</span> The <code>PopStateEvent</code> interface<a href=#the-popstateevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/PopStateEvent/PopStateEvent title="The PopStateEvent() constructor creates a new PopStateEvent object.">PopStateEvent/PopStateEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>11+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>16+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>14+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/PopStateEvent title="PopStateEvent is an interface for the popstate event.">PopStateEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  

  <dl class=domintro><dt><code><var>event</var>.<span id=dom-popstateevent-state>state</span></code><dd><p>Returns a copy of the information that was provided to <code id=the-popstateevent-interface:dom-history-pushstate><a href=#dom-history-pushstate>pushState()</a></code> or <code id=the-popstateevent-interface:dom-history-replacestate><a href=#dom-history-replacestate>replaceState()</a></code>.<dt><code><var>event</var>.<span id=dom-popstateevent-hasuavisualtransition>hasUAVisualTransition</span></code><dd><p>Returns true if the user agent performed a visual transition for this navigation before
   dispatching this event. If true, the best user experience will be given if the author
   synchronously updates the DOM to the post-navigation state.</dl>

  


  <h5 id=the-hashchangeevent-interface><span class=secno>7.2.6.3</span> The <code>HashChangeEvent</code> interface<a href=#the-hashchangeevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HashChangeEvent/HashChangeEvent title="The HashChangeEvent() constructor creates a new HashChangeEvent object, that is used by the hashchange event fired at the window object when the fragment of the URL changes.">HashChangeEvent/HashChangeEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>11+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>16+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HashChangeEvent title="The HashChangeEvent interface represents events that fire when the fragment identifier of the URL has changed.">HashChangeEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.6+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>8+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  <dl class=domintro><dt><code><var>event</var>.<span id=dom-hashchangeevent-oldurl>oldURL</span></code><dd>
    <p>Returns the <a id=the-hashchangeevent-interface:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the <a id=the-hashchangeevent-interface:session-history-entry href=browsing-the-web.html#session-history-entry>session history entry</a> that was previously
    current.</p>
   <dt><code><var>event</var>.<span id=dom-hashchangeevent-newurl>newURL</span></code><dd>
    <p>Returns the <a id=the-hashchangeevent-interface:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the <a id=the-hashchangeevent-interface:session-history-entry-2 href=browsing-the-web.html#session-history-entry>session history entry</a> that is now
    current.</p>
   </dl>

  


  <h5 id=the-pageswapevent-interface><span class=secno>7.2.6.4</span> The <code>PageSwapEvent</code> interface<a href=#the-pageswapevent-interface class=self-link></a></h5>

  

  <dl class=domintro><dt><code><var>event</var>.<span id=dom-pageswapevent-activation>activation</span></code><dd><p>A <code>NavigationActivation</code> object representing the destination and type of the
   cross-document navigation. This would be null for cross-origin navigations.<dt><code><var>event</var>.<a href=#dom-pageswapevent-activation id=the-pageswapevent-interface:dom-pageswapevent-activation>activation</a>.<a href=#dom-navigationactivation-entry-2 id=the-pageswapevent-interface:dom-navigationactivation-entry-2>entry</a></code><dd><p>A <code>NavigationHistoryEntry</code>, representing the <code>Document</code> that is
   about to become active.<dt><code><var>event</var>.<a href=#dom-pageswapevent-activation id=the-pageswapevent-interface:dom-pageswapevent-activation-2>activation</a>.<a href=#dom-navigationactivation-from-2 id=the-pageswapevent-interface:dom-navigationactivation-from-2>from</a></code><dd><p>A <code>NavigationHistoryEntry</code>, equivalent to the value of the <code id=the-pageswapevent-interface:dom-navigation-currententry><a href=#dom-navigation-currententry>navigation.currentEntry</a></code> property at the moment the
   event is fired.<dt><code><var>event</var>.<a href=#dom-pageswapevent-activation id=the-pageswapevent-interface:dom-pageswapevent-activation-3>activation</a>.<a href=#dom-navigationactivation-navigationtype-2 id=the-pageswapevent-interface:dom-navigationactivation-navigationtype-2>navigationType</a></code><dd><p>One of "<code id=the-pageswapevent-interface:dom-navigationtype-push><a href=#dom-navigationtype-push>push</a></code>", "<code id=the-pageswapevent-interface:dom-navigationtype-replace><a href=#dom-navigationtype-replace>replace</a></code>", "<code id=the-pageswapevent-interface:dom-navigationtype-reload><a href=#dom-navigationtype-reload>reload</a></code>", or "<code id=the-pageswapevent-interface:dom-navigationtype-traverse><a href=#dom-navigationtype-traverse>traverse</a></code>", indicating what type of navigation
   that is about to result in a page swap.<dt><code><var>event</var>.<span id=dom-pageswapevent-viewtransition>viewTransition</span></code><dd>
    <p>Returns the <code id=the-pageswapevent-interface:viewtransition><a data-x-internal=viewtransition href=https://drafts.csswg.org/css-view-transitions/#viewtransition>ViewTransition</a></code> object that represents an outbound cross-document view
    transition, if such transition is active when the event is fired. Otherwise, returns null.</p>
   </dl>

  


  <h5 id=the-pagerevealevent-interface><span class=secno>7.2.6.5</span> The <code>PageRevealEvent</code> interface<a href=#the-pagerevealevent-interface class=self-link></a></h5>

  

  <dl class=domintro><dt><code><var>event</var>.<span id=dom-pagerevealevent-viewtransition>viewTransition</span></code><dd>
    <p>Returns the <code id=the-pagerevealevent-interface:viewtransition><a data-x-internal=viewtransition href=https://drafts.csswg.org/css-view-transitions/#viewtransition>ViewTransition</a></code> object that represents an inbound cross-document view
    transition, if such transition is active when the event is fired. Otherwise, returns null.</p>
   </dl>

  


  <h5 id=the-pagetransitionevent-interface><span class=secno>7.2.6.6</span> The <code>PageTransitionEvent</code> interface<a href=#the-pagetransitionevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/PageTransitionEvent/PageTransitionEvent title="The PageTransitionEvent() constructor creates a new PageTransitionEvent object, that is used by the pageshow or pagehide events, fired at the window object when a page is loaded or unloaded.">PageTransitionEvent/PageTransitionEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>11+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>16+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/PageTransitionEvent title="The PageTransitionEvent event object is available inside handler functions for the pageshow and pagehide events, fired when a document is being loaded or unloaded.">PageTransitionEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <dl class=domintro><dt><code><var>event</var>.<span id=dom-pagetransitionevent-persisted>persisted</span></code><dd>
    <p>For the <code id=the-pagetransitionevent-interface:event-pageshow><a href=indices.html#event-pageshow>pageshow</a></code> event, returns false if the page is
    newly being loaded (and the <code id=the-pagetransitionevent-interface:event-load><a href=indices.html#event-load>load</a></code> event will fire). Otherwise,
    returns true.</p>

    <p>For the <code id=the-pagetransitionevent-interface:event-pagehide><a href=indices.html#event-pagehide>pagehide</a></code> event, returns false if the page is
    going away for the last time. Otherwise, returns true, meaning that the page might be reused if
    the user navigates back to this page (if the <code>Document</code>'s <i id=the-pagetransitionevent-interface:concept-document-salvageable><a href=document-lifecycle.html#concept-document-salvageable>salvageable</a></i> state stays true). </p>

    <p>Things that can cause the page to be unsalvageable include:</p>

    <ul><li><p>The user agent decided to not keep the <code>Document</code> alive in a <a id=the-pagetransitionevent-interface:session-history-entry href=browsing-the-web.html#session-history-entry>session
     history entry</a> after <a href=document-lifecycle.html#unload-a-document id=the-pagetransitionevent-interface:unload-a-document>unload</a><li><p>Having <code id=the-pagetransitionevent-interface:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>s that are not <i id=the-pagetransitionevent-interface:concept-document-salvageable-2><a href=document-lifecycle.html#concept-document-salvageable>salvageable</a></i><li><p>Active <code id=the-pagetransitionevent-interface:websocket-2><a data-x-internal=websocket-2 href=https://websockets.spec.whatwg.org/#websocket>WebSocket</a></code> objects<li><p><a href=document-lifecycle.html#abort-a-document id=the-pagetransitionevent-interface:abort-a-document>Aborting a <code>Document</code></a></ul>
   </dl>

  


  <h5 id=the-beforeunloadevent-interface><span class=secno>7.2.6.7</span> The <code>BeforeUnloadEvent</code> interface<a href=#the-beforeunloadevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/BeforeUnloadEvent title="BeforeUnloadEvent is an interface for the beforeunload event.">BeforeUnloadEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>30+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>3.0+</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p class=note>There are no <code>BeforeUnloadEvent</code>-specific initialization methods.</p>

  <p>The <code>BeforeUnloadEvent</code> interface is a legacy interface which allows <a id=the-beforeunloadevent-interface:checking-if-unloading-is-canceled href=browsing-the-web.html#checking-if-unloading-is-canceled>checking
  if unloading is canceled</a> to be controlled not only by canceling the event, but by setting
  the <code>returnValue</code> attribute to a value
  besides the empty string. Authors should use the <code id=the-beforeunloadevent-interface:dom-event-preventdefault><a data-x-internal=dom-event-preventdefault href=https://dom.spec.whatwg.org/#dom-event-preventdefault>preventDefault()</a></code> method, or other means of canceling
  events, instead of using <code>returnValue</code>.</p>

  

  <h4 id=the-notrestoredreasons-interface><span class=secno>7.2.7</span> The <code>NotRestoredReasons</code> interface<a href=#the-notrestoredreasons-interface class=self-link></a></h4>
  

  <dl class=domintro><dt><code><var>notRestoredReasonDetails</var>.<a href=#dom-not-restored-reason-details-reason-2 id=dom-not-restored-reason-details-reason>reason</a></code><dd><p>Returns a string that explains the reason that prevented the document from <a href=browsing-the-web.html#note-bfcache>being served from back/forward cache</a>. See the definition of <a href=dom.html#concept-document-bfcache-blocking-details id=the-notrestoredreasons-interface:concept-document-bfcache-blocking-details>bfcache blocking details</a> for the
   possible string values.<dt><code><var>notRestoredReasons</var>.<a href=#dom-not-restored-reasons-src-2 id=dom-not-restored-reasons-src>src</a></code><dd><p>Returns the <code id=the-notrestoredreasons-interface:attr-iframe-src><a href=iframe-embed-object.html#attr-iframe-src>src</a></code> attribute of the document's <a id=the-notrestoredreasons-interface:node-navigable href=document-sequences.html#node-navigable>node
   navigable</a>'s <a href=document-sequences.html#nav-container id=the-notrestoredreasons-interface:nav-container>container</a> if it is an <code id=the-notrestoredreasons-interface:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>
   element. This can be null if not set or if it is not an <code id=the-notrestoredreasons-interface:the-iframe-element-2><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element.<dt><code><var>notRestoredReasons</var>.<a href=#dom-not-restored-reasons-id-2 id=dom-not-restored-reasons-id>id</a></code><dd><p>Returns the <code id=the-notrestoredreasons-interface:the-id-attribute><a href=dom.html#the-id-attribute>id</a></code> attribute of the document's <a id=the-notrestoredreasons-interface:node-navigable-2 href=document-sequences.html#node-navigable>node
   navigable</a>'s <a href=document-sequences.html#nav-container id=the-notrestoredreasons-interface:nav-container-2>container</a> if it is an <code id=the-notrestoredreasons-interface:the-iframe-element-3><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>
   element. This can be null if not set or if it is not an <code id=the-notrestoredreasons-interface:the-iframe-element-4><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element.<dt><code><var>notRestoredReasons</var>.<a href=#dom-not-restored-reasons-name-2 id=dom-not-restored-reasons-name>name</a></code><dd><p>Returns the <code id=the-notrestoredreasons-interface:attr-iframe-name><a href=iframe-embed-object.html#attr-iframe-name>name</a></code> attribute of the document's
   <a id=the-notrestoredreasons-interface:node-navigable-3 href=document-sequences.html#node-navigable>node navigable</a>'s <a href=document-sequences.html#nav-container id=the-notrestoredreasons-interface:nav-container-3>container</a> if it is an
   <code id=the-notrestoredreasons-interface:the-iframe-element-5><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element. This can be null if not set or if it is not an <code id=the-notrestoredreasons-interface:the-iframe-element-6><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>
   element.<dt><code><var>notRestoredReasons</var>.<a href=#dom-not-restored-reasons-url-2 id=dom-not-restored-reasons-url>url</a></code><dd><p>Returns the document's <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-notrestoredreasons-interface:the-document's-address" data-x-internal="the-document's-address">URL</a>, or null if the
   document is in a cross-origin <code id=the-notrestoredreasons-interface:the-iframe-element-7><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>. This is reported in addition to <code id=the-notrestoredreasons-interface:dom-not-restored-reasons-src-2><a href=#dom-not-restored-reasons-src-2>src</a></code> because it is possible <code id=the-notrestoredreasons-interface:the-iframe-element-8><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>
   navigated since the original <code id=the-notrestoredreasons-interface:attr-iframe-src-2><a href=iframe-embed-object.html#attr-iframe-src>src</a></code> was set.<dt><code><var>notRestoredReasons</var>.<a href=#dom-not-restored-reasons-reasons-2 id=dom-not-restored-reasons-reasons>reasons</a></code><dd><p>Returns an array of <code>NotRestoredReasonDetails</code> for the document. This is null
   if the document is in a cross-origin <code id=the-notrestoredreasons-interface:the-iframe-element-9><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>.<dt><code><var>notRestoredReasons</var>.<a href=#dom-not-restored-reasons-children-2 id=dom-not-restored-reasons-children>children</a></code><dd><p>Returns an array of <code>NotRestoredReasons</code> that are for the document’s
   children. This is null if the document is in a cross-origin <code id=the-notrestoredreasons-interface:the-iframe-element-10><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>.</dl>

  <p>A <code>NotRestoredReasonDetails</code> object has a <dfn id=concept-not-restored-reason-details-backing-struct>backing struct</dfn>, a <a href=#nrr-details-struct id=the-notrestoredreasons-interface:nrr-details-struct>not restored reason details</a> or null, initially null.</p>

  <p>The <dfn data-dfn-for=NotRestoredReasonDetails id=dom-not-restored-reason-details-reason-2 data-dfn-type=attribute><code>reason</code></dfn> getter steps are to return
  <a id=the-notrestoredreasons-interface:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-not-restored-reason-details-backing-struct id=the-notrestoredreasons-interface:concept-not-restored-reason-details-backing-struct>backing struct</a>'s <a href=#nrr-details-reason id=the-notrestoredreasons-interface:nrr-details-reason>reason</a>.</p>

  <p>To <dfn id=create-a-notrestoredreasondetails-object>create a <code>NotRestoredReasonDetails</code> object</dfn> given a <a href=#nrr-details-struct id=the-notrestoredreasons-interface:nrr-details-struct-2>not restored reason details</a> <var>backingStruct</var> and a
  <a id=the-notrestoredreasons-interface:realm href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> <var>realm</var>:</p>

  <ol><li><p>Let <var>notRestoredReasonDetails</var> be a new <code>NotRestoredReasonDetails</code>
   object created in <var>realm</var>.<li><p>Set <var>notRestoredReasonDetails</var>'s <a href=#concept-not-restored-reason-details-backing-struct id=the-notrestoredreasons-interface:concept-not-restored-reason-details-backing-struct-2>backing struct</a> to
   <var>backingStruct</var>.<li><p>Return <var>notRestoredReasonDetails</var>.</ol>

  <p>A <dfn id=nrr-details-struct data-export="">not restored reason details</dfn> is a
  <a id=the-notrestoredreasons-interface:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> with the following <a href=https://infra.spec.whatwg.org/#struct-item id=the-notrestoredreasons-interface:struct-item data-x-internal=struct-item>items</a>:</p>

  <ul><li><p><dfn id=nrr-details-reason>reason</dfn>, a string, initially empty.</ul>

  <p>The <a href=#nrr-details-reason id=the-notrestoredreasons-interface:nrr-details-reason-2>reason</a> is a string that represents the reason that
  prevented the page from being restored from <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>.
  The string is one of the following:</p>

  <dl><dt>"<dfn id=blocking-fetch><code>fetch</code></dfn>"<dd>While <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document>unloading</a>, a fetch initiated by this
   <code>Document</code> was still ongoing and was canceled, so the page was not in a state that
   could be stored in the <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>.<dt>"<dfn id=blocking-navigation-failure><code>navigation-failure</code></dfn>"<dd>The original navigation that created this <code>Document</code> errored, so storing the
   resulting error document in the <a href=browsing-the-web.html#note-bfcache>back/forward cache</a> was
   prevented.<dt>"<dfn id=blocking-parser-aborted><code>parser-aborted</code></dfn>"<dd>The <code>Document</code> never finished its initial HTML parsing, so storing the unfinished
   document in the <a href=browsing-the-web.html#note-bfcache>back/forward cache</a> was prevented.<dt>"<dfn id=blocking-websocket><code>websocket</code></dfn>"<dd>While <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-2>unloading</a>, an open <code id=the-notrestoredreasons-interface:websocket-2><a data-x-internal=websocket-2 href=https://websockets.spec.whatwg.org/#websocket>WebSocket</a></code>
   connection was shut down, so the page was not in a state that could be stored in the <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>. <a href=references.html#refsWEBSOCKETS>[WEBSOCKETS]</a><dt>"<dfn id=blocking-weblock data-export=""><code>lock</code></dfn>"<dd>While <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-3>unloading</a>, held <a id=the-notrestoredreasons-interface:locks href=https://w3c.github.io/web-locks/#lock-concept data-x-internal=locks>locks</a> and
   <a id=the-notrestoredreasons-interface:lock-requests href=https://w3c.github.io/web-locks/#lock-request data-x-internal=lock-requests>lock requests</a> were terminated, so the page was not in a state that could be stored
   in the <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>. <a href=references.html#refsWEBLOCKS>[WEBLOCKS]</a><dt>"<dfn id=blocking-masked data-export=""><code>masked</code></dfn>"<dd>This <code>Document</code> has children that are in a cross-origin <code id=the-notrestoredreasons-interface:the-iframe-element-11><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>, and
   they prevented <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>; or this <code>Document</code>
   could not be <a href=browsing-the-web.html#note-bfcache>back/forward cached</a> for user agent-specific reasons, and
   the user agent has chosen not to use one of the more specific reasons from the list of <a href=#ua-specific-blocking-reasons id=the-notrestoredreasons-interface:ua-specific-blocking-reasons>user-agent specific blocking reasons</a>.
  </dl>

  <p>In addition to the list above, a user agent might choose to expose a reason that prevented the
  page from being restored from <a href=note-bfcache.html>back/forward cache</a> for <dfn id=ua-specific-blocking-reasons>user-agent specific blocking reasons</dfn>. These are one of
  the following strings:</p>

  <dl><dt>"<dfn id=blocking-audio-capture data-export=""><code>audio-capture</code></dfn>"<dd>The <code>Document</code> requested audio capture permission by using <cite>Media Capture and
   Streams</cite>'s <code id=the-notrestoredreasons-interface:getusermedia()><a data-x-internal=getusermedia() href=https://w3c.github.io/mediacapture-main/getusermedia.html#dom-mediadevices-getusermedia>getUserMedia()</a></code> with audio. <a href=references.html#refsMEDIASTREAM>[MEDIASTREAM]</a><dt>"<dfn id=blocking-background-work data-export=""><code>background-work</code></dfn>"<dd>The <code>Document</code> requested background work by calling <code id=the-notrestoredreasons-interface:syncmanager><a data-x-internal=syncmanager href=https://wicg.github.io/background-sync/spec/#syncmanager>SyncManager</a></code>'s
   <code id=the-notrestoredreasons-interface:dom-syncmanager-register><a data-x-internal=dom-syncmanager-register href=https://wicg.github.io/background-sync/spec/#dom-syncmanager-register>register()</a></code> method,
   <code id=the-notrestoredreasons-interface:periodicsyncmanager><a data-x-internal=periodicsyncmanager href=https://wicg.github.io/periodic-background-sync/#periodicsyncmanager>PeriodicSyncManager</a></code>'s <code id=the-notrestoredreasons-interface:dom-periodicsyncmanager-register><a data-x-internal=dom-periodicsyncmanager-register href=https://wicg.github.io/periodic-background-sync/#dom-periodicsyncmanager-register>register()</a></code> method, or
   <code id=the-notrestoredreasons-interface:backgroundfetchmanager><a data-x-internal=backgroundfetchmanager href=https://wicg.github.io/background-fetch/#backgroundfetchmanager>BackgroundFetchManager</a></code>'s <code id=the-notrestoredreasons-interface:dom-backgroundfetchmanager-fetch><a data-x-internal=dom-backgroundfetchmanager-fetch href=https://wicg.github.io/background-fetch/#dom-backgroundfetchmanager-fetch>fetch()</a></code> method.<dt>"<dfn id=blocking-broadcastchannel-message data-export=""><code>broadcastchannel-message</code></dfn>"<dd>While the page was stored in <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>, a
   <code>BroadcastChannel</code> connection on the page received a message and <code id=the-notrestoredreasons-interface:event-message><a href=indices.html#event-message>message</a></code> event was fired.<dt>"<dfn id=blocking-idb-event data-export=""><code>idbversionchangeevent</code></dfn>"<dd>The <code>Document</code> had a pending <code id=the-notrestoredreasons-interface:idbversionchangeevent><a data-x-internal=idbversionchangeevent href=https://w3c.github.io/IndexedDB/#idbversionchangeevent>IDBVersionChangeEvent</a></code> while <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-4>unloading</a>. <a href=references.html#refsINDEXEDDB>[INDEXEDDB]</a><dt>"<dfn id=blocking-idledetector data-export=""><code>idledetector</code></dfn>"<dd>The <code>Document</code> had an active <code id=the-notrestoredreasons-interface:idledetector><a data-x-internal=idledetector href=https://wicg.github.io/idle-detection/#idledetector>IdleDetector</a></code> while <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-5>unloading</a>.<dt>"<dfn id=blocking-keyboard-lock data-export=""><code>keyboardlock</code></dfn>"<dd>While <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-6>unloading</a>, keyboard lock was still active
   because <code id=the-notrestoredreasons-interface:keyboard><a data-x-internal=keyboard href=https://wicg.github.io/keyboard-lock/#keyboard>Keyboard</a></code>'s <code id=the-notrestoredreasons-interface:dom-keyboard-lock><a data-x-internal=dom-keyboard-lock href=https://wicg.github.io/keyboard-lock/#dom-keyboard-lock>lock()</a></code> method was
   called.<dt>"<dfn id=blocking-mediastream data-export=""><code>mediastream</code></dfn>"<dd>A <code id=the-notrestoredreasons-interface:mediastreamtrack><a data-x-internal=mediastreamtrack href=https://w3c.github.io/mediacapture-main/getusermedia.html#mediastreamtrack>MediaStreamTrack</a></code> was in the <a id=the-notrestoredreasons-interface:live-state href=https://w3c.github.io/mediacapture-main/getusermedia.html#idl-def-MediaStreamTrackState.live data-x-internal=live-state>live state</a> upon <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-7>unloading</a>. <a href=references.html#refsMEDIASTREAM>[MEDIASTREAM]</a><dt>"<dfn id=blocking-midi data-export=""><code>midi</code></dfn>"<dd>The <code>Document</code> requested a MIDI permission by calling <code id=the-notrestoredreasons-interface:dom-navigator-requestmidiaccess><a data-x-internal=dom-navigator-requestmidiaccess href=https://webaudio.github.io/web-midi-api/#dom-navigator-requestmidiaccess>navigator.requestMIDIAccess()</a></code>.<dt>"<dfn id=blocking-modals data-export=""><code>modals</code></dfn>"<dd><a href=timers-and-user-prompts.html#user-prompts>User prompts</a> were shown while <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-8>
   unloading</a>.<dt>"<dfn id=blocking-navigating data-export=""><code>navigating</code></dfn>"<dd>While <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-9>unloading</a>, loading was still ongoing, and so
   the <code>Document</code> was not in a state that could be stored in <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>.<dt>"<dfn id=blocking-navigation-canceled data-export=""><code>navigation-canceled</code></dfn>"<dd>The navigation request was canceled by calling <code id=the-notrestoredreasons-interface:dom-window-stop><a href=#dom-window-stop>window.stop()</a></code> and the page was not in a state to be stored in <a href=note-bfcache.html>back/forward cache</a>.<dt>"<dfn id=blocking-non-trivial-bcg data-export=""><code>non-trivial-browsing-context-group</code></dfn>"<dd>The <a id=the-notrestoredreasons-interface:browsing-context-group href=document-sequences.html#browsing-context-group>browsing context group</a> of this <code>Document</code> had more than one
   <a id=the-notrestoredreasons-interface:top-level-browsing-context href=document-sequences.html#top-level-browsing-context>top-level browsing context</a>.<dt>"<dfn id=blocking-otp data-export=""><code>otpcredential</code></dfn>"<dd>The <code>Document</code> created an <code id=the-notrestoredreasons-interface:otpcredential><a data-x-internal=otpcredential href=https://wicg.github.io/web-otp/#otpcredential>OTPCredential</a></code>.<dt>"<dfn id=blocking-outstanding-network-request data-export=""><code>outstanding-network-request</code></dfn>"<dd>While <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-10>unloading</a>, the <code>Document</code> had
   outstanding network requests and was not in a state that could be stored in <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>.<dt>"<dfn id=blocking-payment data-export=""><code>paymentrequest</code></dfn>"<dd>The <code>Document</code> had an active <code id=the-notrestoredreasons-interface:paymentrequest><a data-x-internal=paymentrequest href=https://w3c.github.io/payment-request/#dom-paymentrequest>PaymentRequest</a></code> while <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-11>unloading</a>. <a href=references.html#refsPAYMENTREQUEST>[PAYMENTREQUEST]</a><dt>"<dfn id=blocking-picture-in-picture data-export=""><code>pictureinpicturewindow</code></dfn>"<dd>The <code>Document</code> had an active <code id=the-notrestoredreasons-interface:pictureinpicturewindow><a data-x-internal=pictureinpicturewindow href=https://w3c.github.io/picture-in-picture/#pictureinpicturewindow>PictureInPictureWindow</a></code> while <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-12>unloading</a>. <a href=references.html#refsPICTUREINPICTURE>[PICTUREINPICTURE]</a><dt>"<dfn id=blocking-plugins data-export=""><code>plugins</code></dfn>"<dd>The <code>Document</code> contained <a href=infrastructure.html#plugin id=the-notrestoredreasons-interface:plugin>plugins</a>.<dt>"<dfn id=blocking-method-not-get data-export=""><code>request-method-not-get</code></dfn>"<dd>The <code>Document</code> was created from an HTTP request whose <a href=https://fetch.spec.whatwg.org/#concept-request-method id=the-notrestoredreasons-interface:concept-request-method data-x-internal=concept-request-method>method</a> was not `<code>GET</code>`.
   <a href=references.html#refsFETCH>[FETCH]</a><dt>"<dfn id=blocking-auth-required data-export=""><code>response-auth-required</code></dfn>"<dd>The <code>Document</code> was created from an HTTP response that required HTTP
   authentication.<dt>"<dfn id=blocking-ccns data-export=""><code>response-cache-control-no-store</code></dfn>"<dd>The <code>Document</code> was created from an HTTP response whose `<code id=the-notrestoredreasons-interface:http-cache-control><a data-x-internal=http-cache-control href=https://httpwg.org/specs/rfc7234.html#header.cache-control>Cache-Control</a></code>` header included the "<code>no-store</code>" token. <a href=references.html#refsHTTP>[HTTP]</a><dt>"<dfn id=blocking-ccnc data-export=""><code>response-cache-control-no-cache</code></dfn>"<dd>The <code>Document</code> was created from an HTTP response whose `<code id=the-notrestoredreasons-interface:http-cache-control-2><a data-x-internal=http-cache-control href=https://httpwg.org/specs/rfc7234.html#header.cache-control>Cache-Control</a></code>` header included the "<code>no-cache</code>" token. <a href=references.html#refsHTTP>[HTTP]</a><dt>"<dfn id=blocking-keepalive data-export=""><code>response-keep-alive</code></dfn>"<dd>The <code>Document</code> was created from an HTTP response that contained a `<code>Keep-Alive</code>` header.<dt>"<dfn id=blocking-not-http-https data-export=""><code>response-scheme-not-http-or-https</code></dfn>"<dd>The <code>Document</code> was created from a response whose <a href=https://fetch.spec.whatwg.org/#concept-response-url id=the-notrestoredreasons-interface:concept-response-url data-x-internal=concept-response-url>URL</a>'s <a href=https://url.spec.whatwg.org/#concept-url-scheme id=the-notrestoredreasons-interface:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> was
   not an <a id=the-notrestoredreasons-interface:http(s)-scheme href=https://fetch.spec.whatwg.org/#http-scheme data-x-internal=http(s)-scheme>HTTP(S) scheme</a>. <a href=references.html#refsFETCH>[FETCH]</a><dt>"<dfn id=blocking-response-not-ok data-export=""><code>response-status-not-ok</code></dfn>"<dd>The <code>Document</code> was created from an HTTP response whose <a href=https://fetch.spec.whatwg.org/#concept-response-status id=the-notrestoredreasons-interface:concept-response-status data-x-internal=concept-response-status>status</a> was not an <a id=the-notrestoredreasons-interface:ok-status href=https://fetch.spec.whatwg.org/#ok-status data-x-internal=ok-status>ok status</a>.
   <a href=references.html#refsFETCH>[FETCH]</a><dt>"<dfn id=blocking-rtc data-export=""><code>rtc</code></dfn>"<dd>While <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-13>unloading</a>, a <code id=the-notrestoredreasons-interface:rtcpeerconnection><a data-x-internal=rtcpeerconnection href=https://w3c.github.io/webrtc-pc/#dom-rtcpeerconnection>RTCPeerConnection</a></code> or
   <code id=the-notrestoredreasons-interface:rtcdatachannel><a data-x-internal=rtcdatachannel href=https://w3c.github.io/webrtc-pc/#dom-rtcdatachannel>RTCDataChannel</a></code> was shut down, so the page was not in a state that could be stored in
   the <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>. <a href=references.html#refsWEBRTC>[WEBRTC]</a><dt>"<dfn id=blocking-rtc-used-with-ccns data-export=""><code>rtc-used-with-cache-control-no-store</code></dfn>"<dd>The <code>Document</code> was created from an HTTP response whose
   `<code id=the-notrestoredreasons-interface:http-cache-control-3><a data-x-internal=http-cache-control href=https://httpwg.org/specs/rfc7234.html#header.cache-control>Cache-Control</a></code>` header included the
   "<code>no-store</code>" token, and it has created a <code id=the-notrestoredreasons-interface:rtcpeerconnection-2><a data-x-internal=rtcpeerconnection href=https://w3c.github.io/webrtc-pc/#dom-rtcpeerconnection>RTCPeerConnection</a></code> or
   <code id=the-notrestoredreasons-interface:rtcdatachannel-2><a data-x-internal=rtcdatachannel href=https://w3c.github.io/webrtc-pc/#dom-rtcdatachannel>RTCDataChannel</a></code> which might be used to receive sensitive information, so the page was
   not in a state that could be stored in the <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>.
   <a href=references.html#refsHTTP>[HTTP]</a> <a href=references.html#refsWEBRTC>[WEBRTC]</a><dt>"<dfn id=blocking-sensors data-export=""><code>sensors</code></dfn>"<dd>The <code>Document</code> <a href=https://w3c.github.io/sensors/#request-sensor-access id=the-notrestoredreasons-interface:request-sensor-access data-x-internal=request-sensor-access>requested sensor
   access</a>.<dt>"<dfn id=sw-added data-export=""><code>serviceworker-added</code></dfn>"<dd>The <code>Document</code>'s <a href=https://w3c.github.io/ServiceWorker/#serviceworkercontainer-service-worker-client id=the-notrestoredreasons-interface:serviceworkercontainer-service-worker-client data-x-internal=serviceworkercontainer-service-worker-client>service worker client</a> started to be
   <a href=https://w3c.github.io/ServiceWorker/#dfn-control id=the-notrestoredreasons-interface:dfn-control data-x-internal=dfn-control>controlled</a> by a <code id=the-notrestoredreasons-interface:serviceworker><a data-x-internal=serviceworker href=https://w3c.github.io/ServiceWorker/#serviceworker>ServiceWorker</a></code> while the page was
   in <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>. <a href=references.html#refsSW>[SW]</a><dt>"<dfn id=sw-claimed data-export=""><code>serviceworker-claimed</code></dfn>"<dd>The <code>Document</code>'s <a href=https://w3c.github.io/ServiceWorker/#serviceworkercontainer-service-worker-client id=the-notrestoredreasons-interface:serviceworkercontainer-service-worker-client-2 data-x-internal=serviceworkercontainer-service-worker-client>service worker client</a>'s <span>active service worker</span> was claimed while
   the page was in <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>. <a href=references.html#refsSW>[SW]</a><dt>"<dfn id=blocking-sw-message data-export=""><code>serviceworker-postmessage</code></dfn>"<dd>The <code>Document</code>'s <a href=https://w3c.github.io/ServiceWorker/#serviceworkercontainer-service-worker-client id=the-notrestoredreasons-interface:serviceworkercontainer-service-worker-client-3 data-x-internal=serviceworkercontainer-service-worker-client>service worker client</a>'s <span>active service worker</span> received a
   message while the page was in <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>. <a href=references.html#refsSW>[SW]</a><dt>"<dfn id=blocking-sw-activation data-export=""><code>serviceworker-version-activated</code></dfn>"<dd>The <code>Document</code>'s <a href=https://w3c.github.io/ServiceWorker/#serviceworkercontainer-service-worker-client id=the-notrestoredreasons-interface:serviceworkercontainer-service-worker-client-4 data-x-internal=serviceworkercontainer-service-worker-client>service worker client</a>'s <span>active service worker</span>'s version was
   activated while the page was in <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>.
   <a href=references.html#refsSW>[SW]</a><dt>"<dfn id=blocking-sw-unregistered data-export=""><code>serviceworker-unregistered</code></dfn>"<dd>The <code>Document</code>'s <a href=https://w3c.github.io/ServiceWorker/#serviceworkercontainer-service-worker-client id=the-notrestoredreasons-interface:serviceworkercontainer-service-worker-client-5 data-x-internal=serviceworkercontainer-service-worker-client>service worker client</a>'s <span>active service worker</span>'s <a id=the-notrestoredreasons-interface:service-worker-registration href=https://w3c.github.io/service-workers/#dfn-service-worker-registration data-x-internal=service-worker-registration>service
   worker registration</a> was <a href=https://w3c.github.io/service-workers/#navigator-service-worker-unregister id=the-notrestoredreasons-interface:service-worker-unregister data-x-internal=service-worker-unregister>unregistered</a> while
   the page was in <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>. <a href=references.html#refsSW>[SW]</a><dt>"<dfn id=blocking-sharedworker data-export=""><code>sharedworker</code></dfn>"<dd>This <code>Document</code> was in the <span>owner set</span> of a
   <code id=the-notrestoredreasons-interface:sharedworkerglobalscope><a href=workers.html#sharedworkerglobalscope>SharedWorkerGlobalScope</a></code>.<dt>"<dfn id=blocking-smartcard data-export=""><code>smartcardconnection</code></dfn>"<dd>The <code>Document</code> had an active <code id=the-notrestoredreasons-interface:smartcardconnection><a data-x-internal=smartcardconnection href=https://wicg.github.io/web-smart-card/#dom-smartcardconnection>SmartCardConnection</a></code> while <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-14>unloading</a>.<dt>"<dfn id=blocking-speech-reco data-export=""><code>speechrecognition</code></dfn>"<dd>The <code>Document</code> had an active <code id=the-notrestoredreasons-interface:speechrecognition><a data-x-internal=speechrecognition href=https://wicg.github.io/speech-api/#speechrecognition>SpeechRecognition</a></code> while <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-15>unloading</a>.<dt>"<dfn id=blocking-storage data-export=""><code>storageaccess</code></dfn>"<dd>The <code>Document</code> requested storage access permission by using the Storage Access
   API.<dt>"<dfn id=blocking-unload data-export=""><code>unload-listener</code></dfn>"<dd>The <code>Document</code> registered an <a id=the-notrestoredreasons-interface:event-listener href=https://dom.spec.whatwg.org/#concept-event-listener data-x-internal=event-listener>event listener</a> for the <code id=the-notrestoredreasons-interface:event-unload><a href=indices.html#event-unload>unload</a></code> event.<dt>"<dfn id=blocking-video-capture data-export=""><code>video-capture</code></dfn>"<dd>The <code>Document</code> requested video capture permission by using <cite>Media Capture and
   Streams</cite>'s <code id=the-notrestoredreasons-interface:getusermedia()-2><a data-x-internal=getusermedia() href=https://w3c.github.io/mediacapture-main/getusermedia.html#dom-mediadevices-getusermedia>getUserMedia()</a></code> with video. <a href=references.html#refsMEDIASTREAM>[MEDIASTREAM]</a><dt>"<dfn id=blocking-webhid data-export=""><code>webhid</code></dfn>"<dd>The <code>Document</code> called the WebHID API's <code id=the-notrestoredreasons-interface:request-device><a data-x-internal=request-device href=https://wicg.github.io/webhid/#requestdevice-method>requestDevice()</a></code> method.<dt>"<dfn id=blocking-webshare data-export=""><code>webshare</code></dfn>"<dd>The <code>Document</code> used the Web Share API's <code id=the-notrestoredreasons-interface:dom-navigator-share><a data-x-internal=dom-navigator-share href=https://w3c.github.io/web-share/#share-method>navigator.share()</a></code> method.<dt>"<dfn id=blocking-websocket-used-with-ccns data-export=""><code>websocket-used-with-cache-control-no-store</code></dfn>"<dd>The <code>Document</code> was created from an HTTP response whose
   `<code id=the-notrestoredreasons-interface:http-cache-control-4><a data-x-internal=http-cache-control href=https://httpwg.org/specs/rfc7234.html#header.cache-control>Cache-Control</a></code>` header included the
   "<code>no-store</code>" token, and it has created a <code id=the-notrestoredreasons-interface:websocket-2-2><a data-x-internal=websocket-2 href=https://websockets.spec.whatwg.org/#websocket>WebSocket</a></code> connection
   which might be used to receive sensitive information, so the page was not in a state that could be
   stored in the <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>. <a href=references.html#refsHTTP>[HTTP]</a> <a href=references.html#refsWEBSOCKETS>[WEBSOCKETS]</a><dt>"<dfn id=blocking-webtransport data-export=""><code>webtransport</code></dfn>"<dd>While <a href=document-lifecycle.html#unload-a-document id=the-notrestoredreasons-interface:unload-a-document-16>unloading</a>, an open <code id=the-notrestoredreasons-interface:webtransport><a data-x-internal=webtransport href=https://w3c.github.io/webtransport/#webtransport>WebTransport</a></code>
   connection was shut down, so the page was not in a state that could be stored in the <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>. <a href=references.html#refsWEBTRANSPORT>[WEBTRANSPORT]</a><dt>"<dfn id=blocking-webtransport-used-with-ccns data-export=""><code>webtransport-used-with-cache-control-no-store</code></dfn>"<dd>The <code>Document</code> was created from an HTTP response whose
   `<code id=the-notrestoredreasons-interface:http-cache-control-5><a data-x-internal=http-cache-control href=https://httpwg.org/specs/rfc7234.html#header.cache-control>Cache-Control</a></code>` header included the
   "<code>no-store</code>" token, and it has created a <code id=the-notrestoredreasons-interface:webtransport-2><a data-x-internal=webtransport href=https://w3c.github.io/webtransport/#webtransport>WebTransport</a></code> connection
   which might be used to receive sensitive information, so the page was not in a state that could be
   stored in the <a href=browsing-the-web.html#note-bfcache>back/forward cache</a>. <a href=references.html#refsHTTP>[HTTP]</a> <a href=references.html#refsWEBTRANSPORT>[WEBTRANSPORT]</a><dt>"<dfn id=blocking-webxr data-export=""><code>webxrdevice</code></dfn>"<dd>The <code>Document</code> created a <code id=the-notrestoredreasons-interface:xrsystem><a data-x-internal=xrsystem href=https://immersive-web.github.io/webxr/#xrsystem>XRSystem</a></code>.</dl>

  <hr>

  <p>A <code>NotRestoredReasons</code> object has a <dfn id=concept-not-restored-reasons-backing-struct>backing struct</dfn>,
  a <a href=#nrr-struct id=the-notrestoredreasons-interface:nrr-struct>not restored reasons</a> or null, initially null.</p>

  <p>A <code>NotRestoredReasons</code> object has a <dfn id=concept-not-restored-reasons-reasons>reasons array</dfn>, a
  <code>FrozenArray&lt;<code>NotRestoredReasonDetails</code>></code> or null,
  initially null.</p>

  <p>A <code>NotRestoredReasons</code> object has a <dfn id=concept-not-restored-reasons-children>children array</dfn>, a
  <code>FrozenArray&lt;<span>NotRestoredReasons</span>></code> or null, initially
  null.</p>

  <p>The <dfn data-dfn-for=NotRestoredReasons id=dom-not-restored-reasons-src-2 data-dfn-type=attribute><code>src</code></dfn> getter steps are to return
  <a id=the-notrestoredreasons-interface:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-not-restored-reasons-backing-struct id=the-notrestoredreasons-interface:concept-not-restored-reasons-backing-struct>backing struct</a>'s <a href=#nrr-src id=the-notrestoredreasons-interface:nrr-src>src</a>.</p>

  <p>The <dfn data-dfn-for=NotRestoredReasons id=dom-not-restored-reasons-id-2 data-dfn-type=attribute><code>id</code></dfn> getter steps are to return
  <a id=the-notrestoredreasons-interface:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-not-restored-reasons-backing-struct id=the-notrestoredreasons-interface:concept-not-restored-reasons-backing-struct-2>backing struct</a>'s <a href=#nrr-id id=the-notrestoredreasons-interface:nrr-id>id</a>.</p>

  <p>The <dfn data-dfn-for=NotRestoredReasons id=dom-not-restored-reasons-name-2 data-dfn-type=attribute><code>name</code></dfn> getter steps are to return
  <a id=the-notrestoredreasons-interface:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-not-restored-reasons-backing-struct id=the-notrestoredreasons-interface:concept-not-restored-reasons-backing-struct-3>backing struct</a>'s <a href=#nrr-name id=the-notrestoredreasons-interface:nrr-name>name</a>.</p>

  <p>The <dfn data-dfn-for=NotRestoredReasons id=dom-not-restored-reasons-url-2 data-dfn-type=attribute><code>url</code></dfn> getter steps are:</p>

  <ol><li><p>If <a id=the-notrestoredreasons-interface:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-not-restored-reasons-backing-struct id=the-notrestoredreasons-interface:concept-not-restored-reasons-backing-struct-4>backing struct</a>'s <a href=#nrr-url id=the-notrestoredreasons-interface:nrr-url>URL</a> is null, then return null.<li><p>Return <a id=the-notrestoredreasons-interface:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-not-restored-reasons-backing-struct id=the-notrestoredreasons-interface:concept-not-restored-reasons-backing-struct-5>backing struct</a>'s <a href=#nrr-url id=the-notrestoredreasons-interface:nrr-url-2>URL</a>, <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-notrestoredreasons-interface:concept-url-serializer data-x-internal=concept-url-serializer>serialized</a>.</ol>

  <p>The <dfn data-dfn-for=NotRestoredReasons id=dom-not-restored-reasons-reasons-2 data-dfn-type=attribute><code>reasons</code></dfn> getter steps are to return
  <a id=the-notrestoredreasons-interface:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-not-restored-reasons-reasons id=the-notrestoredreasons-interface:concept-not-restored-reasons-reasons>reasons array</a>.</p>

  <p>The <dfn data-dfn-for=NotRestoredReasons id=dom-not-restored-reasons-children-2 data-dfn-type=attribute><code>children</code></dfn> getter steps are to return
  <a id=the-notrestoredreasons-interface:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-not-restored-reasons-children id=the-notrestoredreasons-interface:concept-not-restored-reasons-children>children array</a>.</p>

  <p>To <dfn id=create-a-notrestoredreasons-object data-export="">create a <code>NotRestoredReasons</code> object</dfn> given a <a href=#nrr-struct id=the-notrestoredreasons-interface:nrr-struct-2>not restored reasons</a> <var>backingStruct</var> and a
  <a id=the-notrestoredreasons-interface:realm-2 href=https://tc39.es/ecma262/#sec-code-realms data-x-internal=realm>realm</a> <var>realm</var>:</p>

  <ol><li><p>Let <var>notRestoredReasons</var> be a new <code>NotRestoredReasons</code> object created
   in <var>realm</var>.<li><p>Set <var>notRestoredReasons</var>'s <a href=#concept-not-restored-reasons-backing-struct id=the-notrestoredreasons-interface:concept-not-restored-reasons-backing-struct-6>backing struct</a> to
   <var>backingStruct</var>.<li><p>If <var>backingStruct</var>'s <a href=#nrr-reasons id=the-notrestoredreasons-interface:nrr-reasons>reasons</a> is null, set
   <var>notRestoredReasons</var>'s <a href=#concept-not-restored-reasons-reasons id=the-notrestoredreasons-interface:concept-not-restored-reasons-reasons-2>reasons array</a> to null.<li>
    <p>Otherwise:</p>
    <ol><li><p>Let <var>reasonsArray</var> be an empty <a id=the-notrestoredreasons-interface:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li>
      <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-notrestoredreasons-interface:list-iterate data-x-internal=list-iterate>For each</a> <var>reason</var> of
      <var>backingStruct</var>'s <a href=#nrr-reasons id=the-notrestoredreasons-interface:nrr-reasons-2>reasons</a>:</p>
      <ol><li><p><a href=#create-a-notrestoredreasondetails-object id=the-notrestoredreasons-interface:create-a-notrestoredreasondetails-object>Create a <code>NotRestoredReasonDetails</code> object</a> given
       <var>reason</var> and <var>realm</var>, and <a href=https://infra.spec.whatwg.org/#list-append id=the-notrestoredreasons-interface:list-append data-x-internal=list-append>append</a>
       it to <var>reasonsArray</var>.</ol>
     <li><p>Set <var>notRestoredReasons</var>'s <a href=#concept-not-restored-reasons-reasons id=the-notrestoredreasons-interface:concept-not-restored-reasons-reasons-3>reasons array</a> to the result of
     <a id=the-notrestoredreasons-interface:creating-a-frozen-array href=https://webidl.spec.whatwg.org/#dfn-create-frozen-array data-x-internal=creating-a-frozen-array>creating a frozen array</a> given <var>reasonsArray</var>.</ol>
   <li><p>If <var>backingStruct</var>'s <a href=#nrr-children id=the-notrestoredreasons-interface:nrr-children>children</a> is null, set
   <var>notRestoredReasons</var>'s <a href=#concept-not-restored-reasons-children id=the-notrestoredreasons-interface:concept-not-restored-reasons-children-2>children array</a> to null.<li>
    <p>Otherwise:</p>

    <ol><li><p>Let <var>childrenArray</var> be an empty <a id=the-notrestoredreasons-interface:list-2 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li>
      <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-notrestoredreasons-interface:list-iterate-2 data-x-internal=list-iterate>For each</a> <var>child</var> of
      <var>backingStruct</var>'s <a href=#nrr-children id=the-notrestoredreasons-interface:nrr-children-2>children</a>:</p>

      <ol><li><p><a href=#create-a-notrestoredreasons-object id=the-notrestoredreasons-interface:create-a-notrestoredreasons-object>Create a <code>NotRestoredReasons</code> object</a> given <var>child</var>
       and <var>realm</var> and <a href=https://infra.spec.whatwg.org/#list-append id=the-notrestoredreasons-interface:list-append-2 data-x-internal=list-append>append</a> it to
       <var>childrenArray</var>.</ol>
     <li><p>Set <var>notRestoredReasons</var>'s <a href=#concept-not-restored-reasons-children id=the-notrestoredreasons-interface:concept-not-restored-reasons-children-3>children array</a> to the result of
     <a id=the-notrestoredreasons-interface:creating-a-frozen-array-2 href=https://webidl.spec.whatwg.org/#dfn-create-frozen-array data-x-internal=creating-a-frozen-array>creating a frozen array</a> given <var>childrenArray</var>.</ol>
   <li><p>Return <var>notRestoredReasons</var>.</ol>

  <p>A <dfn id=nrr-struct data-export="">not restored reasons</dfn> is a <a id=the-notrestoredreasons-interface:struct-2 href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> with
  the following <a href=https://infra.spec.whatwg.org/#struct-item id=the-notrestoredreasons-interface:struct-item-2 data-x-internal=struct-item>items</a>:</p>

  <ul><li><p><dfn id=nrr-src>src</dfn>, a <a id=the-notrestoredreasons-interface:scalar-value-string href=https://infra.spec.whatwg.org/#scalar-value-string data-x-internal=scalar-value-string>scalar value string</a> or null, initially
   null.<li><p><dfn id=nrr-id>id</dfn>, a string or null, initially null.<li><p><dfn id=nrr-name>name</dfn>, a string or null, initially null.<li><p><dfn id=nrr-url>url</dfn>, a <a id=the-notrestoredreasons-interface:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> or null, initially null.<li><p><dfn id=nrr-reasons>reasons</dfn>, null or a <a id=the-notrestoredreasons-interface:list-3 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of
   <a href=#nrr-details-struct id=the-notrestoredreasons-interface:nrr-details-struct-3>not restored reason details</a>, initially null.<li><p><dfn id=nrr-children>children</dfn>, null or a <a id=the-notrestoredreasons-interface:list-4 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <a href=#nrr-struct id=the-notrestoredreasons-interface:nrr-struct-3>not restored reasons</a>, initially null.</ul>

  <p>A <dfn data-export="" data-lt="not restored reasons" id=concept-document-nrr data-dfn-for=Document><code>Document</code>'s not restored reasons</dfn> is its <a id=the-notrestoredreasons-interface:node-navigable-4 href=document-sequences.html#node-navigable>node navigable</a>'s
  <a href=document-sequences.html#nav-active-history-entry id=the-notrestoredreasons-interface:nav-active-history-entry>active session history entry</a>'s <a href=browsing-the-web.html#she-document-state id=the-notrestoredreasons-interface:she-document-state>document state</a>'s <a href=browsing-the-web.html#document-state-not-restored-reasons id=the-notrestoredreasons-interface:document-state-not-restored-reasons>not restored reasons</a>, if
  <code>Document</code>'s <a id=the-notrestoredreasons-interface:node-navigable-5 href=document-sequences.html#node-navigable>node navigable</a> is a <a id=the-notrestoredreasons-interface:top-level-traversable href=document-sequences.html#top-level-traversable>top-level traversable</a>;
  otherwise null.</p>

  <nav><a href=browsers.html>← 7 Loading web pages</a> — <a href=index.html>Table of Contents</a> — <a href=document-sequences.html>7.3 Infrastructure for sequences of documents →</a></nav>
